事件绑定,事件冒泡和事件代理详解。这三个名词听起来很高大上,其实来了解之后你会发现在平时做项目中经常发生。
JS 通过 addEvent 和 addEventLisenter 来绑定事件:(可以为同一元素绑定多个事件)
- <script>
- function addEvent(target, type, handler) {
- if (target.addEventListener) {
- target.addEventListener(type, handler, false);
- } else {
- target.attachEvent('on' + type, handler)
- }
- }
- addEvent(document, 'click',
- function() {
- alert(this === document)
- });
- addEvent(document, 'click',
- function() {
- alert(this === document)
- });
- </script>
注意:不要写在 html 里边(混乱,和上边的方法冲突) 不要用 e.onlick = function(){}(只能绑定一个事件)
jq 通过 bind() 和 on() 来绑定事件: 不再赘述,很常见。 解除事件绑定:(用命名空间指定的事件) $(document).unbind('click.handler2'); // 解除指定的
大部分事件会沿着事件触发的目标元素往上传播。比如:body>div>p>span 如果他们都注册了点击事件,那么在 span 元素上触发点击事件后 p,div,body 各自的点击事件也会按顺序触发。
防止事件冒泡的方法:
- <script>
- function stopPropagation(event) {
- event = event || window.event;
- if (event.stopPropagation) {
- event.stopPropagation()
- } else {// IE
- event.cancelBubble = true
- }
- }
- addEvent('ele', 'click', function(e) {
- // click handler
- stopPropagation(e);
- });
- </script>
给动态添加的元素添加事件绑定,一般绑定的逻辑会在渲染前执行,绑定的时候找不到元素所以并不能成功,当然你也可以把绑定事件的代码放在 Ajax 请求之后。这样做在一些事件逻辑简单的应用里面没问题,但是会加重数据渲染逻辑和事件处理的逻辑耦合。一但事件处程序特别多的时候,我们通常建议将把 事件的逻辑和其它代码逻辑分离。 这样方便维护。
一般做法:
- item1
- item2
- item3
- item4
- item5
- ';
- var ul = document.getElementById('list')
- ul.innerHTML(ajaxData);
- var lis = ul.getElementsByTagName('li');
- for (var i = 0; i < lis.length; i++) {
- bindEvent(lis[i], i);
- }
- }, 1000);
事件代理方法:
- item1
- item2
- item3
- item4
- item5
- ';
- el.innerHTML(ajaxData)
- }, 1000);
- delegateEvent(el, 'click', function(target) {
- console.log(target.id);
- });
来源: http://www.2cto.com/kf/201705/640167.html