【前端系列教程之jQuery】09_jQuery事件处理

我是波哩个波

已于 2022-03-10 16:19:46 修改

阅读量1k

点赞数

分类专栏： # jQuery从入门到精通文章标签： jquery 前端 javascript

于 2022-01-11 14:03:22 首次发布

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/122430961

版权

jQuery从入门到精通专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、页面载入

ready(fn)

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

<script>
	// 在DOM加载完成时运行的代码，可以这样写：
    $(document).ready(function(){
      // 在这里写你的代码...
    });
    
    // 使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
	$(function($) {
      // 你可以在这里继续使用$作为别名...
    });
</script>

二、事件处理

on(eve,[sel],[data],fn)1.7+

在选择元素上绑定一个或多个事件的事件处理函数。

        on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己，请参阅.one()
        events,[selector],[data],fn：
                events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click" 或" keydown.myPlugin" 。
                selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
                data:当一个事件被触发时要传递event.data给事件处理函数。
                fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

<script>
	// 在点击时显示一个段落的文本:
    $("p").on("click", function(){
   	 alert( $(this).text() );
    });
    
    // 将数据传递给事件处理程序，这里通过名称指定:
    function myHandler(event) {
    	alert(event.data.foo);
    }
	$("p").on("click", {foo: "bar"}, myHandler)
    
    // 取消表单提交动作，并通过返回false防止事件冒泡:
    $("form").on("submit", false)
    
    // 使用. preventdefault()取消默认操作。
    $("form").on("submit", function(event) {
      event.preventDefault();
    });
    
    // 使用. stoppropagation()在不阻止表单提交的情况下阻止提交事件冒泡。
    $("form").on("submit", function(event) {
      event.stopPropagation();
    });
</script>

off(eve,[sel],[fn])1.7+

在选择元素上移除一个或多个事件的事件处理函数。

        off() 方法移除用.on()绑定的事件处理程序。
        events,[selector],[fn]：
                events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".
                selector:一个最初传递到.on()事件处理程序附加的选择器。
               fn:事件处理程序函数以前附加事件上，或特殊值false.

<script>
	// 从所有段落中删除所有事件处理程序:
    $("p").off()
    
    // 从所有段落中删除所有委托的单击处理程序:
    $("p").off( "click", "**" )
</script>

bind(type,[data],fn)

        为每个匹配元素的特定事件绑定事件处理函数。
type,[data],function(eventObject)：
                type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
                data:作为event.data属性值传递给事件对象的额外数据对象
                fn:绑定到每个匹配元素的事件上面的处理函数
        type,[data],false:
                false: 将第三个参数设置为false会使默认的动作失效。
        events: 一个或多个事件类型的字符串和函数的数据映射来执行他们。

<script>
	// 当每个段落被点击的时候，弹出其文本。
    $("p").bind("click", function(){
      alert( $(this).text() );
    });
    
    // 同时绑定多个事件类型
    $('#foo').bind('mouseenter mouseleave', function() {
      $(this).toggleClass('entered');
    });
    
    // 同时绑定多个事件类型/处理程序
    $("button").bind({
      click: function () {
        $("p").slideToggle();
      },
      mouseover: function () {
        $("body").css("background-color", "red");
      },
      mouseout: function () {
        $("body").css("background-color", "#FFFFFF");
      }
    });
    
    // 你可以在事件处理之前传递一些附加的数据。
    function handler(event) {
      alert(event.data.foo);
    }
    $("p").bind("click", {foo: "bar"}, handler)
    
    // 通过返回false来取消默认的行为并阻止事件起泡。
    $("form").bind("submit", function() { return false; })
    
    // 通过使用 preventDefault() 方法只取消默认的行为。
    $("form").bind("submit", function(event){
      event.preventDefault();
    });
    
    // 通过使用 stopPropagation() 方法只阻止一个事件起泡。
    $("form").bind("submit", function(event){
      event.stopPropagation();
    });
</script>

one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

        多数情况下，可以把事件处理函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数）。
        type,[data],fn：
                type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
                data:将要传递给事件处理函数的数据映射
                fn:每当事件触发时执行的函数。

<script>
	// 当所有段落被第一次点击的时候，显示所有其文本。
    $("p").one("click", function(){
      alert( $(this).text() );
    });
</script>

trigger(type,[data])

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行

        所有触发的事件现在会冒泡到DOM树上了。举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡，或者在事件处理函数中返回false即可。
        type,[data]：
                type:一个事件对象或者要触发的事件类型
                data:传递给事件处理函数的附加参数

<script>
	// 提交第一个表单，但不用submit()
    $("form:first").trigger("submit")
    
    // 给一个事件传递参数
    $("p").click(function (event, a, b) {
        // 一个普通的点击事件时，a和b是undefined类型
        // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
        console.log(a + " " + b)
    }).trigger("click", ["foo", "bar"]);
    
    // 下面的代码可以显示一个"Hello World"
    $("p").bind("myEvent", function (event, message1, message2) {
      alert(message1 + ' ' + message2);
    });
    $("p").trigger("myEvent", ["Hello","World!"]);
</script>

triggerHandler(type, [data])

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

        这个方法的行为表现与trigger类似，但有以下三个主要区别：
                第一，他不会触发浏览器默认事件。
                第二，只触发jQuery对象集合中第一个元素的事件处理函数。
                第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
        type,[data]：
                type:要触发的事件类型
                data:传递给事件处理函数的附加参数

<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br /><br />
<input type="text" value="To Be Focused" />
<script>
    // 如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。
    $("#old").click(function () {
        $("input").trigger("focus");
    });
    $("#new").click(function () {
        $("input").triggerHandler("focus");
    });
    $("input").focus(function () {
        $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
    });
</script>

unbind(t,[d|f])

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

如果提供了事件类型作为参数，则只删除该类型的绑定事件。

        如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
        type,[fn]：
                type:删除元素的一个或多个事件,由空格分隔多个事件值。
                fn:要从每个匹配元素的事件中反绑定的事件处理函数
        type,false：
                type:删除元素的一个或多个事件,由空格分隔多个事件值
                false:设置为false会使默认的动作失效。
        eventObj：
                事件对象。这个 eventObj 参数来自事件绑定函数

<script>
	// 把所有段落的所有事件取消绑定
    $("p").unbind()
    
    // 将段落的click事件取消绑定
    $("p").unbind( "click" )
    
    // 删除特定函数的绑定，将函数作为第二个参数传入
    var foo = function () {
      // 处理某个事件的代码
    };

    $("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 

    $("p").unbind("click", foo); // ... 再也不会被触发 foo
</script>

三、事件委派

delegate(s,[t],[d],fn)

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

        使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
        selector,[type],fn：
                selector:选择器字符串，用于过滤器触发事件的元素。
                type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
                fn:当事件发生时运行的函数
        selector,[type],[data],fn：
                data:传递到函数的额外数据
        selector,events：
                events:一个或多个事件类型的字符串和函数的数据映射来执行他们。

<div style="background-color:red">
    <p>这是一个段落。</p>
    <button>请点击这里</button>
</div>
<script>
	// 当点击鼠标时，隐藏或显示 p 元素：
	$("div").delegate("button","click",function(){
      $("p").slideToggle();
    });
</script>

undelegate([s,[t],fn])

        删除由 delegate() 方法添加的一个或多个事件处理程序。
        selector,[type],fn：
                selector:需要删除事件处理程序的选择器。
                type:需要删除处理函数的一个或多个事件类型。由空格分隔多个事件值。必须是有效的事件。
                fn:要删除的具体事件处理函数。
        selector,events：
                selector:需要删除事件处理程序的选择器。
                events:一个或多个事件类型的字符串和函数的数据映射来执行他们。

<script>
	// 从p元素删除由 delegate() 方法添加的所有事件处理器：
    $("p").undelegate();
    
    // 从p元素删除由 delegate() 方法添加的所有click事件处理器：
    $("p").undelegate( "click" )
</script>

四、事件切换

hover([over,]out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
        over,out：
                over:鼠标移到元素上要触发的函数
                out:鼠标移出元素要触发的函数

<script>
	// over,out 描述:鼠标悬停的表格加上特定的类
	$("td").hover(
      function () {
        $(this).addClass("hover");
      },
      function () {
        $(this).removeClass("hover");
      }
    );
    
    // out 描述:hover()方法通过绑定变量"handlerInOut"来切换方法。
    $("td").bind("mouseenter mouseleave",handlerInOut);

	$("td").hover(handlerInOut);
</script>

五、事件

blur([[data],fn])
        当元素失去焦点时触发 blur 事件。
        这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

change([[data],fn])
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

click([[data],fn])
触发每一个匹配元素的click事件。
这个函数会调用执行绑定到click事件的所有函数。

dblclick([[data],fn])
当双击元素时，会发生 dblclick 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

error([[data],fn])
        当元素遇到错误（没有正确载入）时，发生 error 事件。
        这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。
        对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。

focus([[data],fn])
当元素获得焦点时，触发 focus 事件。
可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。

focusin([data],fn)
当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

focusout([data],fn)
当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

keydown([[data],fn])
当键盘或按钮被按下时，发生 keydown 事件。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

keypress([[data],fn])
当键盘或按钮被按下时，发生 keypress 事件。
keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

keyup([[data],fn])
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

mousedown([[data],fn])
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mouseenter([[data],fn])
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave([[data],fn])
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

mousemove([[data],fn])
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

mouseout([[data],fn])
        当鼠标指针从元素上移开时，发生 mouseout 事件。
        该事件大多数时候会与 mouseover 事件一起使用。
        注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。

mouseover([[data],fn])
        当鼠标指针位于元素上方时，会发生 mouseover 事件。
        该事件大多数时候会与 mouseout 事件一起使用。
        注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。请看下面例子的演示。

mouseup([[data],fn])
当在元素上放松鼠标按钮时，会发生 mouseup 事件。
与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

resize([[data],fn])
当调整浏览器窗口的大小时，发生 resize 事件。

scroll([[data],fn])
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

select([[data],fn])
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

submit([[data],fn])
当提交表单时，会发生 submit 事件。
该事件只适用于表单元素。

unload([[data],fn])
        在当用户离开页面时，会发生 unload 事件。
        具体来说，当发生以下情况时，会发出 unload 事件：
                点击某个离开页面的链接
        在地址栏中键入了新的 URL
          使用前进或后退按钮
        关闭浏览器
        重新加载页面
        fn：
                在每一个匹配元素的blur事件中绑定的处理函数。
        [data],fn：
                data:可传入data供函数fn处理。
                fn:在每一个匹配元素的blur事件中绑定的处理函数。

<script>
	// 触发所有段落的blur事件
    $("p").blur();
    
    // 任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
    $("p").blur( function () { alert("Hello World!"); } );
    
    // 给所有的文本框增加输入验证
    $("input[type='text']").change( function() {
      // 这里可以写些验证代码
    });
    
    // 触发页面内所有段落的点击事件
    $("p").click();
    
    // 将页面内所有段落点击后隐藏。
    $("p").click( function () { $(this).hide(); });
    
    // 给页面上每个段落的双击事件绑上 "Hello World!" 警告框
    $("p").dblclick( function () { alert("Hello World!"); });
    
    // 在服务器端记录JavaScript错误日志:
    $(window).error(function(msg, url, line){
      jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
    });
    
    // 隐藏JavaScript错误:
    $(window).error(function(){
      return true;
    });
    
    // 当页面加载后将 id 为 'login' 的元素设置焦点:
    $(document).ready(function(){
      $("#login").focus();
    });
    
    // 使人无法使用文本框:
	$("input[type=text]").focus(function(){
      this.blur();
    });
    
    // 获得焦点后会触发动画:
    $("p").focusin(function() {
      $(this).find("span").css('display','inline').fadeOut(1000);
    });
    
    // 失去焦点后会触发动画:
    $("p").focusout(function() {
      $(this).find("span").css('display','inline').fadeOut(1000);
    });
    
    // 在页面内对键盘按键做出回应，可以使用如下代码:
    $(window).keydown(function(event){
      switch(event.keyCode) {
        // ...
        // 不同的按键可以做不同的事情
        // 不同的浏览器的keycode不同
        // 更多详细信息:     http://unixpapa.com/js/key.html
        // ...
      }
    });
    
    // 计算在输入域中的按键次数：
    $("input").keydown(function(){  $("span").text(i+=1);});
    
    // 当按下按键时，改变文本域的颜色：
    $("input").keyup(function(){
      $("input").css("background-color","#D6D6FF");
    });
    
    // 当按下鼠标按钮时，隐藏或显示元素：
    $("button").mousedown(function(){
      $("p").slideToggle();
    });
    
    // 当鼠标指针进入（穿过）元素时，改变元素的背景色：
    $("p").mouseenter(function(){
      $("p").css("background-color","yellow");
    });
    
    // 当鼠标指针离开元素时，改变元素的背景色：
    $("p").mouseleave(function(){
      $("p").css("background-color","#E9E9E4");
    });
    
    // 获得鼠标指针在页面中的位置：
    $(document).mousemove(function(e){
      $("span").text(e.pageX + ", " + e.pageY);
    });
    
    // 当鼠标从元素上移开时，改变元素的背景色：
    $("p").mouseout(function(){
      $("p").css("background-color","#E9E9E4");
    });
    
    // 当鼠标指针位于元素上方时时，改变元素的背景色：
    $("p").mouseover(function(){
      $("p").css("background-color","yellow");
    });
    
    // 当松开鼠标按钮时，隐藏或显示元素：
    $("button").mouseup(function(){
      $("p").slideToggle();
    });
    
    // 让人每次改变页面窗口的大小时很郁闷的方法:
    $(window).resize(function(){
      alert("Stop it!");
    });
    
    // 当页面滚动条变化时，执行的函数:
    $(window).scroll( function() { /* ...do something... */ } );
    
    // 触发所有input元素的select事件:
    $("input").select();
    
    // 当文本框中文本被选中时执行的函数:
    $(":text").select( function () { /* ...do something... */ } );
    
    // 提交本页的第一个表单:
    $("form:first").submit();
    
    // 如果你要阻止表单提交:
    $("form").submit( function () {
      return false;
    } );
    
    // 页面卸载的时候弹出一个警告框:
    $(window).unload( function () { alert("Bye now!"); } );
</script>

六、事件对象

eve.currentTarget
在事件冒泡阶段中的当前DOM元素

eve.data
当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind

eve.delegateTarget1.7+
        当currently-called的jQuery事件处理程序附加元素。
        此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件，事件处理程序附加在正在处理的元素的祖先上。
        对于非授权的事件处理程序，直接连接到一个元素，event.delegateTarget 总是等价于event.currentTarget.

eve.isDefaultPrevented()
        根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。

eve.isImmediatePropag...()
        根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。

eve.isPropagationStopped()
根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。

eve.namespace
当事件被触发时此属性包含指定的命名空间。

eve.pageX
鼠标相对于文档的左边缘的位置。

eve.pageY
鼠标相对于文档的上边缘的位置

eve.preventDefault()
阻止默认事件行为的触发。
例如，在执行这个方法后，如果点击一个锚点，就不会让浏览器跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)调用过了。

eve.relatedTarget
在事件中涉及的其它任何DOM元素。
对于 mouseout 事件，它指向被进入的元素；对于 mousein 事件，它指向被离开的元素。

eve.result
        这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。

eve.stopImmediatePro...()
        阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

eve.stopPropagation()
防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

eve.target
最初触发事件的DOM元素。

eve.timeStamp
这个属性返回事件触发时距离1970年1月1日的毫秒数。
这可以很方便的检测某个jQuery函数的性能。

eve.type
返回事件类型

eve.which
        针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。
        event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。
注：
        stopPropagation与stopImmediatePropagation的区别：
https://blog.csdn.net/weixin_42420703/article/details/104585427

<button>display event.namespace</button>
<p></p>
<script>
	// currentTarget的匹配`this`关键字。
    $("p").click(function(event) {
        alert( event.currentTarget === this ); // true  
    });  
    
    // 获取绑定的数据
    $("a").each(function(i) {
        $(this).bind('click', {index:i}, function(e){
           alert('my index is ' + e.data.index);
        });
    });
    
    // 当单击任何box类中的按钮时，将box的背景颜色更改为红色。
    $(".box").on("click", "button", function (event) {
        $(event.delegateTarget).css("background-color", "red");
    });
    
    // 检测 event.preventDefault() 是否被调用过。
    $("a").click(function(event){
        alert( event.isDefaultPrevented() ); // false
        event.preventDefault();
        alert( event.isDefaultPrevented() ); // true
	}); 
    
    // 检测 event.stopImmediatePropagation() 是否被调用过。
    $("button").click(function(event) {
        immediatePropStopped(event);
        event.stopImmediatePropagation();
        immediatePropStopped(event);
	});
    
    // 确定事件在命名空间中使用。
    $("p").bind("test.something", function (event) {
        alert(event.namespace);
    });
    $("button").click(function (event) {
        $("p").trigger("test.something");
    });
    
    // 显示鼠标相对于文件的左侧和顶部边缘的位置
    $(document).bind('mousemove',function(e){
       $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
    });
    
    // 在鼠标离开锚时，提醒输入的元素类型。
    $("a").mouseout(function (event) {
        alert(event.relatedTarget.nodeName); // "BODY"
    }); 
    
    // 显示前一个事件处理函数的返回值。
     $("button").click(function(event) {    return "hey";  });
        $("button").click(function(event) {
            $("p").html( event.result );
	});
    
    // 阻止调用其它事件处理函数。
    $("p").click(function (event) {
        event.stopImmediatePropagation();
    });
    $("p").click(function (event) {
        // This function won't be executed
        $(this).css("background-color", "#f00");
    });
    $("div").click(function (event) {
        // This function will be executed
        $(this).css("background-color", "#f00");
    });
    
    // 灭掉click事件的冒泡。
    $("p").click(function(event){
        event.stopPropagation();    // do something
	});
</script>

<input id="whichkey" value="type something">
<div id="log"></div>
<script>
    $('#whichkey').bind('keydown',function(e){
        $('#log').html(e.type + ': ' +  e.which );  });
</script>

我是波哩个波

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端系列教程之jQuery】09_jQuery事件处理

一、页面载入ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调...
复制链接

扫一扫