事件

時間 2020-09-10

標籤事件简体版

原文原文鏈接

事件綁定html

咱們通常使用的是bind()方法瀏覽器

bind()方法有3個參數：ide

第一個參數是事件類型，包括 blur、focus、load、resize、scroll、unload、click、dblick、函數

mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、this

select、submit、keydown、keypress、keyup、和error等，固然也能夠是自定義名稱。spa

第二個參數爲可選參數，做爲event.data屬性值傳遞給事件對象的額外數據對象。htm

第三個參數則是用來綁定的函數處理。對象

合成事件seo

jQuery有兩個合成事件——hover()方法，相似前面講過的ready()方法，hover()方法和toggle()方法都屬於jQuery自定義的方法。事件

hover()方法

hover()方法的語法結構爲： hover(enter,leave);

hover()方法用於模擬光標懸停事件。當光標移動到元素上時，會觸發指定的第1個函數（enter）；

當光標移出這個元素時，會觸發指定的第2個函數（leave）。

示例：

$(function () {
            $("#pane1 h5.head").hover(function () {
                $(this).next().show();
            }.function(){
                $(this).next().hide();
            });
});

toggle()方法

toggle()方法的語法結構爲： toggle（fn1,fn2,…fnN);

toggle()方法用於模擬鼠標連續單擊事件。第1次單擊元素，觸發指定的第1個函數（fn1）；當再次單擊同一元素時，則觸發指定的第2個函數（fn2）；若是有更多函數，則依次觸發，直到最後一個。隨後的每次單擊都重複對這幾個函數的輪番調用。

事件冒泡

什麼是事件冒泡呢？

在頁面上能夠有多個事件，也能夠多個元素響應同一個事件。假設網頁上有兩個元素，其中一個元素嵌套在另外一個元素裏，而且都被綁定了click事件，同時<body>元素上也綁定了click事件。

例如：

$(function () {
            //爲span元素綁定click事件
            $('span').bind("click".function(){
                var txt = $('#msg').html(txt);
            });
            //爲div元素綁定click事件
        $('#content').bind("click".function(){
            var txt = $('#msg').html()+"<p>外層div元素被單擊<p/>";
            $('#msg').html(txt);
        });
        //爲body元素綁定click事件
            $("body").bind("click".function(){
                var txt = $('#msg').html()+"<p>body元素被單擊.<p/>";
            $('#msg').html(txt);
            });
        })
    </script>
</head>
<body>
    <div id="countent">
        外層div元素
        <span>內層span元素</span>
        外層div元素
    </div>
    <div id="msg"></div>