欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端事件 持续补充

程序员文章站 2022-02-11 06:29:00
...

1.bind(type,[data],fun)

第一个参数blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。也可以是自定义名称，Jquery中的事件绑定类型比javascript少了"on",因此jquery中事件click对应javascript中的onclick函数。

第二个参数可选参数，传递给事件的额外数据

第三个参数用来绑定的处理函数

$("#id").bind("click",function(){

alert("sth");

})

bind()方法为元素绑定的事件一直有效直到unbind()方法或者删除元素。如果想要绑定事件只能执行一次就要使用one()方法绑定事件。one()同bind()方法一样，区别在于one()方法绑定的事件只能执行一次。

2.unbind

$(selctor).unbind([type],[data])

unbind()方法是元素bind()方法的反向操作，从每个匹配的元素中删除绑定的事件。当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。如果指定了事件类型，第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。

3.live动态绑定die动态解绑

$("p").live("click",function(){$(this).hide();});

该示例为所有的p元素节点动态添加了click事件，无论是现有的p元素节点还是以后要添加的p元素节点都有会中点单击时候触发hide()从而隐藏自己。die()方法是live()方法的反向操作，结果live()方法动态绑定的事件和unbind()方法一样。使用die()方法取法动态绑定后，所有动态绑定的事件将删除。

4.hover()toggle()合成事件

hover()方法模仿鼠标悬停事件，方法格式如下：hover(enter,leave)。例：

$("ul li").hover(function(){alert("Enter");},functiron(){alert("leave");});

该示例为ul的li元素绑定悬停事件，当鼠标停上ul的子元素li上时候会触发enter()函数，打印“Enter”,当鼠标移出li元素时候会打印"leave"。

toggle()方法切换操作循环执行绑定的函数，方法格式如下：toggle(fun1,fun2,...,funN);

5.event.stopPropagation()阻止事件冒泡

<body><div><span>事件冒泡</span>div内容</div>body内容</body>

$("body").click(function(){alert("body");});

$("body div").click(function(){alert("div");});

$("span").click(function(){alert("span");});

在该示例中当点击span时候会触发三个打印事件 "span" "div" "body"，如何阻止事件冒泡？可以使用Jquery事件中的stropPropagation()方法来停止事件冒泡。上面示例改成这样：

$("body").click(function(event){alert("body");event.stopPropagation();});

$("body div").click(function(event){alert("div");event.stopPropagation();});

$("span").click(function(event){alert("span");event.stopPropagation();});

这样当点击不同元素时候就不会发生冒泡事件。

6.JQUERY Callbacks

var cb=$.Callbacks();

//单个函数

cb.add(function(){

console.log("1");

})

//多个函数参数

cb.add(function(){

console.log("2");

},function(){

console.log("3");

});

//添加数组参数

cb.add([function(){

console.log("array1")

},function(){

console.log("array2");

}

]);

fire:依次执行队列里的函数

var cb = $.Callbacks();

cb.add([
    function () {
        console.log('add one');
    }, function () {
        console.log('add two');
    }
]);

cb.fire();
//add one
//add two

var cb = $.Callbacks();

cb.add(function (name, age) {
    console.log(name, age);
});

cb.fire('Jacky', 26);//Jacky 26
fireWith就是改变我们添加函数的context 

var cb = $.Callbacks();

var obj = {
    name: 'objName'
};

cb.add(function (age) {
    console.log(this.name, age);
});

cb.fireWith(obj, [26]);//objName 26

fireWith第一个参数是我们的context，第二个参数是我们需要传递的内容数组，注意了是数组！

empty 清空函数队列

once 函数队列只执行一次

//添加参数
var cb = $.Callbacks('once');

cb.add(function () {
    console.log('add');
});

cb.fire();//add
cb.fire();
unique：往内部队列添加的函数保持唯一，不能重复添加

stopOnFalse:内部队列里的函数是依次执行的，当某个函数的返回值是false时，停止继续执行剩下的函数

memory:当函数队列fire或fireWith一次过后，内部会记录当前fire或fireWith的参数。当下次调用add的时候，会把记录的参数传递给新添加的函数并立即执行这个新添加的函数。

var cb = $.Callbacks('memory');

cb.add(function (name) {
    console.log('one', name);
});

cb.fire('Jacky');//first Jacky

cb.add(function (name) {
    console.log('two', name);
});//two Jacky
7.filter()方法将匹配元素集合缩减为匹配指定选择器的元素。 

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>


$('li').filter(':even').css('background-color', 'red');


8.not() 从匹配元素集合中删除元素。





<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>


$('li').not(':even').css('background-color', 'red');

9.next(),prev(),find().eq(),index()



next()，prev()寻找下一个兄弟节点和上一个兄弟节点


find()寻找


eq()索引


index() 索引就是当前元素在所有兄弟节点中的位置






$('li').not(':even').css('background-color', 'red');




10.blur()/focus()


blur()失去焦点


focus()获得焦点




$(selector).blur()



$(selector).focus()


11.siblings()


siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。











					

																				

						

							上一篇：							
								【记录】前端补充笔记							
						

						

							下一篇：							
								[51Nod 1617] 奇偶数组							
						

					

															

						

							推荐阅读