JavaScript, JQuery事件委托

1、引言

现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。(公司也不会容忍那么多员工站在门口就为了等快递);

这种事件委托还有个好处,就是即便公司又来很多员工,前台MM照样可以签收新员工的快递,新员工即便刚来但一样拥有拿自己快件的方法;

2、概念

通俗来讲: 事件有:onclick、onmouseover、onmouseout等等;委托呢,就是让别人来做,这件事情本身是加在元素上,然而你却加载别人身上来做,完成事件;

3、原理

利用冒泡原理,将事件加在父级上触发,执行效果;

4、好处

  1. 提高性能;
  2. 新添加元素,可以直接拥有事件;

5、事件源

跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的。

6、使用情景

  * 为DOM中的很多元素绑定相同事件;
  * 为DOM中尚不存在的元素绑定事件;

7、举栗子

需要触发每个li来改变他们的背景颜色
```html

  • 111111111
  • 22222222222
  • 33333333
  • 44444444444

js一般写法:

window.onload = function(){

    var oUl = document.getElementById(‘ul‘);
    var aLi = oUl.getElementsByTagName(‘li‘);

    for(var i=0; i<aLi.length; i++){
     aLi[i].onmouseover = function(){
         this.style.background = ‘red‘;
     }
     aLi[i].onmouseout = function(){
         this.style.background = ‘ ‘;
     }
 }  

}

事件委托的js写法:

window.onload = function(){
  var oUl = document.getElementById(‘ul‘);
  var aLi = oUl.getElementsByTagName(‘li‘);
  /*这里用到事件源:event对象, 事件源,不管在哪个事件中,只要你操作的那个元素就是事件源
  ie: window.event.srcElent
  标准下: event.target
  nodeName: 找到元素的标签名;
  */
  oUl.onmouseover = function(ev) {
  var ev = ev||window.event;
  var target = ev.target || ev.srcElement;
  // console.log(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
       target.style.background = ‘red‘;
    }
}
  oUl.onmouseout = function(ev) {
    var ev = ev || window.event;
    var target = ev.target|| ev.srcElement;

    if(target.nodeName.toLowerCase() == ‘li‘){
       target.style.background = ‘ ‘;
    }
  }
}

事件委托的jq写法

    $(function(){
        $("#ul").on(‘click‘,‘li‘,function(){
            if(!$(this).attr(‘s‘)){
                $(this).css(‘background‘,‘red‘);
                $(this).attr(‘s‘,true);
            }else{
                $(this).css(‘background‘,‘#fff‘);
                $(this).removeAttr(‘s‘);
            }
        })
    })

原文地址:https://www.cnblogs.com/ning123/p/10624674.html

时间: 2024-10-07 11:59:17

JavaScript, JQuery事件委托的相关文章

Javascript的事件委托和事件处理

随着Ajax和RIA越来越成为主流,Javascript对事件(Event)的支持也得到了越来越多的关注.像雅虎这样的公司正在突破RIA的极限,让web应用程序在浏览器中更有效的运行,就像桌面应用程序一样.雅虎的邮箱应用就是一个很好的例子. 雅虎的一些工程师给我们展示了提高Javascript应用程序性能的技术.其中有提到强大的事件处理架构.提高性能的要旨就是用事件委托(Event Delegation)而非传统的事件处理(Event Handling). 我发现一个问题是,网上大部分的例子是用

jquery事件委托详解

jQuery事件委托处理流程 上一章分析jQuery.event.add的时候已经分析了事件绑定,再把绑定的部分源码抽出来 if ( !(eventHandle = elemData.handle) ) { eventHandle = elemData.handle = function( e ) { //当一个事件被调用后页面已经卸载,则放弃jQuery.event.trigger()的第二个事件, return typeof jQuery !== core_strundefined &&

jquery事件委托的原理和用途

事件委托 声明:这一篇文章只是阐述了委托事件的原理和用委托的好处还有就是在什么时候要委托合适.在这里用的是on()和off()而对于委托的其他方法(delegate().live()等)和各个方法的比较在这里并没有详细阐述,以后如果有机会在发一篇 1.什么是委托呢? a)定义:把一件事交给别人代做就叫做委托 b)问题:为什么要把事交给别人来做呢? 原因很简单:第一.自己不想做,所以交给别人 第二.自己不会做,所以交给别人来做 第三.让别人来做这一件事更有优势等等(这也是为什么要使用委托的原因)

Jquery事件委托之Safari

什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) $(element).click(function(){ //do something }) //事件委托(Jquery) $(parents).on("click",element,function(){ //do something }) 事件委托的原理 事件委托将事件监听绑定在目标元

JavaScript中事件委托(事件代理)详解

在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 事

jQuery事件委托

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供了live().dalegate()和on()方法. 事件委托 我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒泡到div和body(即document对象).因此

Javascript - Jquery - 事件

事件(Event) 页面载入事件 ready(x) x是事件侦听器,由window或document调用.加载完毕会调用x. $(document).ready(function(){ }) //可以简写为:$(function(){ }) //或 $(document).ready(aa=function(){ }) //或 $(document).ready(aa) function aa(){ } 键盘鼠标事件 keyup(x) x是事件侦听器,键盘按下时或使用鼠标粘贴时会调用x. $(d

javaScript绑定事件委托 demo

事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 直到被父级元素捕获. 事件代理  给外层元素绑定一个处理事件, 就可以处理子元素上出发所有事件. DOM 标准 事件三个阶段: 捕获 到达目标. 冒泡 IE 不支持捕获, 但冒泡够用了. event.currentTarget 事件处理程序当前正在处理事件的那个元素 event.target 事件

JavaScript的事件委托技术

如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了.DOM访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的. 一.事件委托 对事件处理程序过多的问题解决的方案就是事件委托技术. 事件委托技术利用了事件冒泡.只需指定一个事件处理程序. 我们可以为某个需要触发事件的父元素来绑定事件处理程序. HTML代码: <ul id = "ul1"> <li id = "li1"&