您的位置：首页 > Web前端 > JQuery

JavaScript和jQuery的事件

2016-03-19 13:16 666 查看

一、添加事件监听函数-JavaScript

1.元素标签里直接写js代码

<body onload="var i=1; alert(i);">
</body>

2.标签里写函数名

<head>
<script>
　　function hi(){
　　alert("hi");
　　}
</script>
</head>
<body onload="hi();">
</body>

以上两种方式本质是一样的，被称为内联模式，效率最低。

3.js脚本里给事件属性指定函数

window.onload = hi;

这种方法称为传统模式，只能注册一个事件，再多会被覆盖。内联模式和传统模式都属于DOM Level 0事件模型，已经不被推荐。

4.不依赖元素属性的监听器

if(obj.addEventListener) {
obj.addEventListener("click",clickFunc,false);
} else if(obj.attachEvent) {
obj.attachEvent("onclick",clickFunc);
} else {
obj.onclick = clickFunc;
}

这种方式属于DOM Level 2事件模型，可以注册多个事件处理函数，按注册顺序执行。

二、添加事件监听函数-jQuery

1.$(selector).event([data],callback)

2.$(selector).bind(event,[data],callback)

$(selector).unbind(event,callback) 不指定event将将移除该event上所有事件。

3.$(selector).one(event,[data],callback) 绑定事件只会触发一次。

4.$(selector).delegate(childElement,event,[data],callback) 委托给子元素（没理解透）

5.$(selector).on(event,[data],callback) 据说上面的方法都调用了它

三、事件传播

1.事件传播的顺序：

　　冒泡 div>body>html>document>window （IE5.5之前没有html）

　　捕获和冒泡相反

IE只支持冒泡，非IE都支持。注册事件时，addEventListener第三个参数false时表示冒泡传播，true时捕获。element.onclick注册的和上面jQuery注册的都是冒泡传播。但并不是所有事件都支持和冒泡，如blur,focus,load,unload都不支持冒泡。

2.阻止事件传播：

JavaScript方式

function stopEvent(evnt) {
if(evnt.stopPropagation) {
evnt.stopPropagation();
}   else {
evnt.cancleBubble = true;
}
}

jQuery方式

$(obj).bind('click',function(event){   //绑定事件
//todo
event.stopPropagation();   //阻止事件传播
});

jQuery还有一个preventDefault方法，这个方法阻止了默认操作，如提交表单，打开连接，同时也阻止事件继续传播。

[b]四、主动事件触发[/b]

element.click();

$(selector).trigger(event) 触发指定元素的某个事件

五、jQuery的其他几个事件

1.页加载触发ready()事件

ready：只要页面DOM结构加载后便触发，图片之类可以尚未加载完

onload:必须页面元素全部加载成功才触发，时间上晚于ready

$(document).ready(function(){}) 等价于$(function(){})

2.hover切换事件

$(selector).hover(in,out) 鼠标进入元素中触发in事件，移出元素触发out事件。

$(#div1).hover(
function(){
//鼠标进入元素做的事
},
function(){
//鼠标移出元素做的事
}
);

3.toggle点击切换函数

$(selector).toggle() 无参数时，点击元素实现切换显示隐藏

$("div").toggle();

$(selector).toggle(fn1,fn2,fn3,...) 参数是多于1个是函数，点击元素实现函数轮流调用，调用完最后函数后再调用首个函数。

$("div").toggle(
function(){alert(1);},
function(){alert(2);},
function(){alert(3);}
);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航