JQ事件委托、插件封装及JQ补充

JQ事件委托及JQ补充

事件委托

事件委托是利用事件冒泡来实现，只指定一个事件处理程序 来管理某一类型的所有事件

原因

1）在js中添加到页面的事件处理程序的个数直接关系到页面的整体加载速度
因为每个事件处理程序都是一个对象，对象会占用内存。对象越多需要加载的内存就越多
2）有很多个数据的表格以及很长的列表逐个添加事件，对于开发人员而言，就是噩梦
so： 事件委托能极大的提高页面的加载速度 ，减少开发人员的工作量

使用场景

1）操作子元素时，不用一一遍历，可以根据是事件触发的对象来进行相应的操作
可以为DOM当中的很多元素去绑定 “相同的” 事件
2）将事件委托给父级后，动态创建(删除)的子元素不同重新绑定(解绑)事件，实现了事件和元素的同步更新

适用

1） focus(), blur() 这两个方法本身没有事件冒泡，所以无法使用事件委托
2） mouseover, mouseout这两个事件的触发率较高，经常需要计算，所以偶尔会出现卡顿、偏差
3） 比较适用的有： click mousedown mouseup keydown keyup keypress

与原生委托比较

• JS事件委托

	
	var uls = document.getElementsByTagName("ul")[0];
	var lists = document.getElementsByClassName("list");
     
	uls.addEventListener("click",function (ev) {
		var target = ev.target;
     
		var color = ev.target.style.backgroundColor;  //红色
     
		if (target.nodeName == "LI") {
			//效果1：
	       for (var i = 0; i < lists.length; i++) {
				lists[i].style.backgroundColor = "white";
         	}
         	//效果2：
			if (color == "white" || color == "") { // false
				target.style.backgroundColor = "red";
			}
		}
	})
	

• JQ事件委托

	$("ul").on("click",".list",function (ev) {
		var target = $(ev.target);
		target.css("background-color","red");
	})
	

插件封装

释放/更改 $ 的作用

• 方法1：

	var @js = $.noConflict()

• 方法2：

	
	// 放弃使用
	$();
	// 使用
	jQuery();
	

添加JQ对象方法

• 方法1

   $.fn.extend({
        toRed:function () {
            $(this).css("backgroundColor","red");
        },
        toBlue:function () {
            $(this).css("backgroundColor","blue");
        }
   });
   

• 方法2

    $.fn.toBig = function () {
       $(this).css("fontSize","20px");
    }
    

类级别的添加

• 方式1

	$.extend({
		addDiv:function () {
			var $div = $("<div></div>");
            $div.css({
                width:"100px",
                height:"100px",
                background:"red"
            });
        $div.html("你猜我从哪里来");
            $("body").append($div);
        }
   });

• 方式2

    $.addSpan = function () {
        var $s = $("<span></span>");
        $s.css({
            width:"100px",
            height:"100px",
            background:"blue"
        });
        $s.html("我是一个span");
        $("body").append($s);
    }
    

直接通过$来调用， 不再受到调用者的约束
注意：如果$的所有权被修改了，使用修改后的，或者使用jQuery

JQ补充

• 判断样式类名

	
	// 方式 1 :
	// if(被判断目标.is(".类名")){
		// 执行代码、功能
	// }
	
	// 方式 2 :
	// is / hasClass('类名')
	

• attr和prop区别

  • 相同点
    均为获取或设置元素的属性值
  • 不同点
    • prop是处理元素的固有属性；attr处理自定义属性
    • 操作固有属性时，prop 返回正确值，attr 返回undefind

• stop( 参数1，参数2 ) 停止动画

  • 参数1：stopAll
    清除动画队列，默认false，后续动画继续执行
  • 参数2：goToEnd
    立即完成当前动画，默认false

• each( 参数1，参数2 )
  用于循环遍历成员、数据，常用于多元素或者任意数组和对象的循环访问

  • 参数1
    需要遍历的目标
  • 参数2
    每个目标要执行的功能