jQuery的事件

window.onload() 和 $(function(){})

浏览器装载文档，页面加载完毕后，浏览器会通过该方法为DOM元素添加事件：

js - window.onload()方法
- 执行时机：网页中所有元素（及关联文件）完全加载到浏览器后才执行
- onload事件一次只能报错对一个函数的引用，自动覆盖前面的函数。
jquery - $(document).ready()方法
- 执行时机：DOM完全就绪就可以调用，缺点：不确定元素关联文件是否下载完成
  - 页面加载方法-load()方法
  - ```
  $(window).load(function(){
      //会在所有内容加载完毕后触发
  })
```
- 每次调用都会在现有行为上追加新行为，按顺序执行
- 简写
  - $(function(){});
  - $().ready(function{});

绑定与合成事件

事件	作用
bind()	对匹配元素进行特定事件绑定(事件类型，可选参数，处理函数)
is()	判断元素是否符合表达式
hover()	合成事件，模拟光标的悬停事件
toggle()	模拟鼠标连续单击事件；切换元素的可见状态；
triggle()	触发被选元素的指定类型

事件冒泡

多个元素响应同一个事件，事件开始由具体的元素（绑定的元素），逐级向上传播到较为不具体的节点（文档body）

问题：使用W3School中trigger()的例子，为什么出现了三次：

<!--HTML-->
<input type="text" name="FirstName" value="Hello World">
<br />
<button>激活 input 域的 select 事件<button>

//jQuery
$(function(){
    $("input").select(function(){
        this.after("文本被选中了！");
    });
    var e = $.Event("select");
    $("button").click(function(){
        $("input").trigger(e);
    });
});

点击后发现出现了三个文本被选中了！

首先，我发现如果input内没有值就会只返回一个文本被选中!，所以第一个是文字未被选中时显示的。

其次我查询到从jQuery1.3开始，.trigger()事件会在DOM树上冒泡；

所以第二个应该是trigger选中Hello Wrold又执行一次；

第三个是检测到Hello World被选中再执行一次；

阻止方法：使用triggerHandler或者.stopPropagation()方法

阻止事件冒泡

event.stopPropagation()

阻止默认行为： event.preventDefault()

或return false

事件捕获

从DOM最顶端往下开始触发

jQuery不支持事件捕获。

对象事件的属性

event.pageX 和 event.pageY获取到光标相对于页面的x坐标和y坐标。

在JavaScript中：

IE浏览器 - event.x / event.y
Firefox - event.pageX / event.pageY

移除事件 .unbind()

添加元素 .append()

qq_27568213

发布了9 篇原创文章 · 获赞 0 · 访问量 3310

私信关注

jQuery事件笔记 -《锋利的jQuery》