事件委托其实是利用的事件冒泡的机制来实现的
原理:把事件加在父元素上,在父元素里判断事件源(目标元素)是否为你想要触发的元素标签,如果是才触发,不是不触发
事件冒泡:子元素事件触发后,会依次调用父级元素的同名事件,直到window,事件冒泡默认就存在
// // 找到ul
// var ul = document.getElementsByTagName('ul')[0];
// // 添加新的li
// document.getElementById('btn1').onclick = function(){
// var li = document.createElement('li');
// li.innerHTML = "我是新的li";
// ul.appendChild(li);
// }
// var list = document.getElementsByTagName('li');
// for(var i = 0; i < list.length; i++){
// list[i].onclick = function(){
// alert('被点了');
// }
// }
// 如果我希望后面创建的li也有点击事件,就加到ul身上(因为所有li被点,都会事件冒泡都会冒泡到ul上)
// 可是我只是想给li加点击事件,你现在直接给ul加点击事件,相当于ul里所有的元素都有点击事件
// 如何保证我只让li有点击事件?
// ul.onclick = function(e){
// e = e || window.event;
// // console.log(e.target);// 获取事件源(目标元素)
// // 我只要判断事件源是否为li,就行了,只有li才执行代码就行了
// // console.log(e.target.nodeName); //nodeName节点名,如果是标签会得到标签名(大写)
// if(e.target.nodeName == 'LI'){
// alert('被点击了');
// }
// }
// $('li').click(function(){
// alert('被点了');
// })
// 把事件加在ul身上,用事件委托
// 事件委托:可以让后面新加的元素也有事件
$('ul').on('click','li',function(){
alert('被点了');
})
// $('#btn1').click(function(){
// // 创建新的li添加到ul里
// $('<li>我是新的li</li>').appendTo( $('ul') );
// });
事件冒泡:默认就存在,指的是子元素的事件触发后,会依次调用父元素的同名事件
trigger(‘事件名’)
用代码调用某个事件
$('.box').click(function () {
alert('div被点了');
});
// 现在我想点击按钮,触发按钮的事件外,还想触发div的点击事件
$('#btn1').click(function () {
alert('按钮被点了');
// trigger
// 代码调用box的点击事件(模拟有人点了div)
$('.box').trigger('click');
});