Takip Edin

JAVASCRIPT

Events ve LocalStorage

events ve local storage - öne çıkan görsel

Event Listeners Kullanımı

// Event Listeners

const btn = document.querySelector('#btnDeleteAll');
const btn2 = document.querySelector('#btnAddNewTask');

// btn.addEventListener('click', function() {
//     console.log('btn clicked.');
// })

// btn.addEventListener('click',btnClick);
// btn.addEventListener('click',btnClick2);
// btn2.addEventListener('click',btnClick);

// function btnClick() {
//     console.log('btn clicked.');
// }

// function  btnClick2() {
//     console.log('btn clicked (btnClick2).');
// }

// btn.addEventListener('click', function(e) {
//     console.log('btn clicked.');

//     e.preventDefault();
// });

btn.addEventListener('click', function(e) {
    let val; 

    val = e;

    val = e.target;
    val = e.target.id;
    val = e.target.classList;
    val = e.type;

    console.log(val);

    e.preventDefault();
});

Mouse Events

// Mouse Events

const btn = document.querySelector('#btnDeleteAll');
const ul = document.querySelector('#task-list');

// click

// btn.addEventListener('click',eventHandler);
// ul.addEventListener('click',eventHandler);

// function eventHandler(event){
//     console.log(`event type: ${event.type}`);
// }

// ***************************

// double click

// btn.addEventListener('dblclick',addEventListener);

// function addEventListener(event) {
//     console.log(`event type: ${event.type}`);
// }

// *****************************

// mouse down

// btn.addEventListener('mousedown',addEventListener);

// mouse up

// btn.addEventListener('mouseup',addEventListener);

// function addEventListener(event) {
//     console.log(`event type: ${event.type}`);
// }

// ********************************

// mouse enter

// ul.addEventListener('mouseenter',addEventListener); // mouse'la ul listesinin içine girdiğimizde console'da mouseenter çıktısı oluşur.

// mouse leave

// ul.addEventListener('mouseleave',addEventListener); // mouse'la ul listesinin dışına çıktığımızda console'da mouseleave çıktısı oluşur.

// function addEventListener(event) {
//     console.log(`event type: ${event.type}`);
// }

// ************************************

// "mouseover/mouseout" ile "mouseenter/mouseleave" birbirine benzer ancak bir nesnenin alt nesnesine geçiş yaptığımızda "mouseenter/mouseleave" çalışmazken mouseover/mouseout çalışmaktadır.

// ul.addEventListener('mouseover',addEventListener);

// ul.addEventListener('mouseout',addEventListener);

// function addEventListener(event) {
//     console.log(`event type: ${event.type}`);
// }

// ***************************************

// mouse move

const h4 = document.querySelector('h4');
ul.addEventListener('mousemove',eventHandler);

function eventHandler(event) {
    console.log(`event type: ${event.type}`);

    h4.textContent = `Mouse X: ${event.offsetX}, Mouse Y: ${event.offsetY}`;
}

Keyboard Events

// Keyboard Events

const input = document.querySelector('#txtTaskName');

const form = document.querySelector('form');

const select = document.querySelector('#select');

// input.addEventListener('keydown',eventHandler);
// input.addEventListener('keyup',eventHandler);

// function eventHandler(e) {
//     console.log('event type: ' + e.type);
//     console.log('key code: ' + e.keyCode);
//     console.log('value: ' + e.target.value);
// }

// *******************************************

// input.addEventListener('focus',eventHandler);
// input.addEventListener('blur',eventHandler);

// function eventHandler(e) {
//     console.log('event type: ' + e.type);

//     e.target.style.backgroundColor = 'bisque';
// }

// *********************************************

// input.addEventListener('cut',eventHandler);
// input.addEventListener('paste',eventHandler);

// function eventHandler(e) {
//     console.log('event type: ' + e.type);
// }

// **********************************************

// form.addEventListener('submit',eventHandler);

// function eventHandler(e) {
//     console.log('event type: ' + e.type);

//     e.preventDefault();
// }

// ***********************************************

// input.addEventListener('select',eventHandler);

// function eventHandler(e) {
//     console.log('event type: ' + e.type);
// }

// ************************************************

select.addEventListener('change',eventHandler);

function eventHandler(e) {
    console.log('event type: ' + e.type);

    console.log('value: ' + e.target.value);
}

Event Bubbling and Capturing

// Event Bubbling

const form = document.querySelector('form');
const cardBody = document.querySelector('.card-body');
const card = document.querySelector('.card');
const container = document.querySelector('.container');

// form.addEventListener('click', function(e) {
//     console.log('form');
//     e.stopPropagation();
// });

// cardBody.addEventListener('click', function(e) {
//     console.log('card body');
//     e.stopPropagation();
// });

// card.addEventListener('click', function(e) {
//     console.log('card');
//     e.stopPropagation();
// });

// container.addEventListener('click', function(e) {
//     console.log('container');
//     e.stopPropagation();
// });

// Event Capturing

// form.addEventListener('click', function(e) {
//     console.log('form');    
// },true);

// cardBody.addEventListener('click', function(e) {
//     console.log('card body');
// },true);

// card.addEventListener('click', function(e) {
//     console.log('card');
// },true);

// container.addEventListener('click', function(e) {
//     console.log('container');
// },true);

// ***********************************************

// const deleteItems = document.querySelectorAll('.fa-times');

// deleteItems.forEach(function(item){
//     item.addEventListener('click',function(e){
//         console.log(e.target);
//     })
// });

// ************************************************

// const ul = document.querySelector('ul');

// ul.addEventListener('click',function(e){
//     console.log(e.target);
// });

// *************************************************

const ul = document.querySelector('ul');

ul.addEventListener('click',function(e){

    if(e.target.className === 'fas fa-times') {
        e.target.parentElement.parentElement.remove();
        e.preventDefault();
    }

});

Local Storage

// Local Storage

let val;
let hobies = ['futbol','sinema','satranç'];

// Set Item

const firstName = localStorage.setItem('firstName','Necati');

const lastName = localStorage.setItem('lastName','İrsoy');

// Get Item

val = localStorage.getItem('firstName');
val = localStorage.getItem('lastName');

// Remove Item

// localStorage.removeItem('firstName');
// localStorage.removeItem('lastName');

// Clear

// localStorage.clear();

// Set Array to Storage

localStorage.setItem('hobies',JSON.stringify(hobies));

val = JSON.parse(localStorage.getItem('hobies'));

console.log(val);
console.log(localStorage);

// Session Storage

// const city = sessionStorage.setItem('city','Ankara');

// const country = sessionStorage.setItem('country','Türkiye');

// console.log(sessionStorage);
Devamını oku

Popüler

error: Content is protected !!