JS 在浏览器中 以单线程运行. 页面加载后. 一旦所有js代码被执行完后, 就只能依赖触发事件来执行JS代码

浏览器 收到鼠标/键盘 的输入后.会自动在对应的 DOM节点上触发相应的事件. 如果这个节点 绑定了 对应的js处理函数. 这个函数就会被自动调用.

不同的浏览器 绑定事件的代码都不太一样.js又帮我们屏蔽了不同浏览器的差异. 我们总是编写相同的代码.

如: 要在点击超链接时候弹出提示框: /* HTML: * * 点我试试 * */

// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
    alert('Hello!');
});

on 方法用来把你的一个事件 另一种更简化的写法: 直接调用 click()方法 a.click( function () { alert(‘Hello!’);} );

两者完全等价。我们通常用后面的写法。

鼠标事件

click: 鼠标单击时触发; dblclick:鼠标双击时触发; mouseenter:鼠标进入时触发; mouseleave:鼠标移出时触发; mousemove:鼠标在DOM内部移动时触发; hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。

键盘事件

键盘事件仅作用在当前焦点的DOM上,通常是<input>和<textarea>。 keydown:键盘按下时触发; keyup:键盘松开时触发; keypress:按一次键后触发。

其他事件

focus:当DOM获得焦点时触发; blur:当DOM失去焦点时触发; change:当<input>、<select>或<textarea>的内容改变时触发; submit:当<form>提交时触发; ready:当页面被载入并且DOM树完成初始化后触发。

ready 事件

页面加载完成 会触发 ready事件.非常有用. 很多脚本 是需要所有别的脚本加载好之后才能正常运行的…

$(document).ready(function () {
    // on('submit', function)也可以简化:
    $('#testForm).submit(function () {
        alert('submit!');
    });
});

甚至还可以再简化为: $(function () { // init… });

完全可以反复绑定事件处理函数,它们会依次执行: $(function () { console.log(‘init A…’); }); $(function () { console.log(‘init B…’); }); $(function () { console.log(‘init C…’); });

事件参数

有些事件,如 mousemove keypress 我们需要获取鼠标位置 和 按键的值, 否则监听这些事件也就没什么意义了. 所有事件都会传入 event对象 作为参数. 可以从event对象上获得更多的信息

$(function () {
    $('#testMouseMoveDiv').mousemove(function (e) {
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
    });
});

效果实测: mousemove: pageX = 361, pageY = 3212

取消绑定 off(‘click’, function)

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);

需要特别注意的是,下面这种写法是无效的: // 绑定事件: a.click(function () { alert(‘hello!’); });

// 解除绑定:
a.off('click', function () {
    alert('hello!');
});

事件触发条件

事件的触发总是由用户操作引发的。 用JS脚本触发的修改 不会触发事件

例如,我们监控文本框的内容改动: var input = $(‘#test-input’); input.change(function () { console.log(‘changed…’); });

当用户在文本框中输入时,就会触发change事件。但是,如果用JavaScript代码去改动文本框的值,将不会触发change事件: var input = $(‘#test-input’); input.val(‘change it!’); // 无法触发change事件

如果希望用代码来触发 change事件: 可以用无参数的 change()方法来触发:

var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件

input.change()相当于input.trigger(‘change’),它是trigger()方法的简写。

为什么我们希望手动触发一个事件呢?如果不这么做,很多时候,我们就得写两份一模一样的代码。

浏览器安全限制

有些js代码 只有在用户触发下才能执行. 如: window.open() // 无法弹出新窗口,将被浏览器屏蔽: $(function () { window.open(‘/’); });

这些“敏感代码”只能由用户操作来触发: var button1 = $(‘#testPopupButton1’); var button2 = $(‘#testPopupButton2’);

function popupTestWindow() {
    window.open('/');
}

button1.click(function () {
    popupTestWindow();
});

button2.click(function () {
    // 不立刻执行popupTestWindow(),100毫秒后执行:
    setTimeout(popupTestWindow, 100);
});

当用户点击button1时,click事件被触发,由于popupTestWindow()在click事件处理函数内执行,这是浏览器允许的,而button2的click事件并未立刻执行popupTestWindow(),延迟执行的popupTestWindow()将被浏览器拦截。