回上頁 - 網頁JQuery語法

006、JQuery 監聽元件的事件方法 (Event Listener)

1、常用滑鼠事件：click

範例1：寫法

<script>
$(document).ready(function(){

    $("元件名稱").on("事件名稱", 處理函式);

    $("p").on("click", function(){
        //寫程式
    });

});
</script>

 

<script src="js/jquery-3.7.1.min.js"></script>

<body style="font-size: 2.4rem;">
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
</body>

<script>
$(document).ready(function(){

    $("p").on("click", function(){      //監聽是否觸發 click 事件

        $(this).hide();                 //如果觸發事件，就執行這一行
    });

});
</script>

2、常用滑鼠事件：hover 滑鼠移入和移出

<script src="js/jquery-3.7.1.min.js"></script>

<body style="font-size: 2.4rem;">
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
</body>

<script>
$(document).ready(function(){

    $("p").hover(function(){

        $(this).css("background-color","yellow");
    },function(){

        $(this).css("background-color","lightgray");
        // $(this).css("background-color","initial");
    });

});
</script>


<script src="js/jquery-3.7.1.min.js"></script>

<body style="font-size: 2.4rem;">
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
<p>哈囉！你好啊！</p>
</body>

<script>
$(document).ready(function(){

    $("p").mouseenter(function(){

        $(this).css("background-color","yellow");
    })
    .mouseleave(function(){

        //$(this).css("background-color","lightgray");
        $(this).css("background-color","initial");
    });

});
</script>


<script>
$(document).ready(function(){

    $("p").mouseenter(function(){

        $(this).css("background-color","yellow");
    })

    $("p").mouseleave(function(){
        
        //$(this).css("background-color","lightgray");
        $(this).css("background-color","initial");
    })

});
</script>

3、鍵盤事件：keypress、keydown、keyup

<script src="js/jquery-3.7.1.min.js"></script>

<body style="font-size: 2.4rem;">
<p id="sign">符號</p>
<p id="code">code</p>
</body>

<script>
$(document).ready(function(){

    $(document).on("keydown", function(event){
        
        $("p#sign").text("符號是："+event.key);
        $("p#code").text("keyCode是："+event.keyCode);
    });

});
</script>


<script src="js/jquery-3.7.1.min.js"></script>

<body style="font-size: 2.4rem;">
<p id="sign">符號</p>
<p id="code">code</p>
</body>

<script>
$(document).ready(function(){

    $(document).on("keypress", function(event){
        
        $("p#sign").text("符號是："+event.key);
        $("p#code").text("ASCII Code是："+event.keyCode);
    });

});
</script>

4、表單事件：focus、blur、change

<script src="js/jquery-3.7.1.min.js"></script>

<body style="font-size: 2.4rem;">
<form id="f">
帳號：<input type="text" name="user" id="user" placeholder="請輸入帳號">
<button>送出</button>
</form>
</body>

<script>
$(document).ready(function(){

    $("input").focus(function(){                        //focus()

        $(this).css("font-size","2rem")                 //設定文字大小
        $(this).css("background-color","yellow");       //設定背景色
    });

    $("input").blur(function(){                         //blur()

        $(this).css("font-size","initial");             //設定文字大小回預設值
        $(this).css("background-color","initial");      //設定背景色回預設值
    });

    $("button").click(function(){
        
        $("#f").submit();                               //送出表單
    });

});
</script>

5、事件方法列表

參考網站：https://www.w3ccoo.com/jquery/jquery_ref_events.html

方法/屬性描述
bind()版本3.0中已棄用。請改用on()方法。向元素添加事件處理常式
blur()添加/觸發失去焦點事件
change()添加/觸發 change 事件
click() 添加/觸發 click 事件
dblclick()添加/觸發 double click 事件
delegate()版本3.0中已棄用。請改用on()方法。向匹配元素的當前或未來的子元素添加處理常式
die()在版本 1.9 中被移除。移除所有通過 live() 方法添加的事件處理常式
error() 在版本 3.0 中被移除。添加/觸發 error 事件
event.currentTarget 在事件冒泡階段內的當前 DOM 元素
event.data包含當前執行的處理常式被綁定時傳遞到事件方法的可選資料
event.delegateTarget返回當前調用的 jQuery 事件處理常式所添加的元素
event.isDefaultPrevented()返回指定的 event 物件上是否調用了 event.preventDefault()
event.isImmediatePropagationStopped()返回指定的 event 物件上是否調用了 event.stopImmediatePropagation()
event.isPropagationStopped()返回指定的 event 物件上是否調用了 event.stopPropagation()
event.namespace 返回當事件被觸發時指定的命名空間
event.pageX 返回相對于文檔左邊緣的滑鼠位置
event.pageY 返回相對于文檔上邊緣的滑鼠位置
event.preventDefault()阻止事件的默認行為
event.relatedTarget 返回当鼠标移动时哪个元素进入或退出
event.result包含由被指定事件觸發的事件處理常式返回的最後一個值
event.stopImmediatePropagation()阻止其他事件處理常式被調用
event.stopPropagation() 阻止事件向上冒泡到 DOM 樹，阻止任何父處理常式被事件通知
event.target返回哪個 DOM 元素觸發事件
event.timeStamp 返回從 1970 年 1 月 1 日到事件被觸發時的毫秒數
event.type返回哪種事件類型被觸發
event.which 返回指定事件上哪個鍵盤鍵或滑鼠按鈕被按下
focus() 添加/觸發 focus 事件
focusin()添加事件處理常式到 focusin 事件
focusout()添加事件處理常式到 focusout 事件
hover() 添加兩個事件處理常式到 hover 事件
keydown()添加/觸發 keydown 事件
keypress()添加/觸發 keypress 事件
keyup() 添加/觸發 keyup 事件
live()在版本 1.9 中被移除。添加一個或多個事件處理常式到當前或未來的被選元素
load()在版本 3.0 中被移除。添加一個事件處理常式到 load 事件
mousedown() 添加/觸發 mousedown 事件
mouseenter()添加/觸發 mouseenter 事件
mouseleave()添加/觸發 mouseleave 事件
mousemove() 添加/觸發 mousemove 事件
mouseout()添加/觸發 mouseout 事件
mouseover() 添加/觸發 mouseover 事件
mouseup()添加/觸發 mouseup 事件
off()移除通過 on() 方法添加的事件處理常式
on()向元素添加事件處理常式
one()向被選元素添加一個或多個事件處理常式。該處理常式只能被每個元素觸發一次
$.proxy()接受一個已有的函數，並返回一個帶特定上下文的新的函數
ready() 規定當 DOM 完全載入時要執行的函數
resize()添加/觸發 resize 事件
scroll()添加/觸發 scroll 事件
select()添加/觸發 select 事件
submit()添加/觸發 submit 事件
toggle()在版本 1.9 中被移除。添加 click 事件之間要切換的兩個或多個函數
trigger()觸發綁定到被選元素的所有事件
triggerHandler()觸發綁定到被選元素的指定事件上的所有函數
unbind()版本3.0中已棄用。請改用off()方法從被選元素上移除添加的事件處理常式
undelegate()版本3.0中已棄用。請改用off()方法從現在或未來的被選元素上移除事件處理常式
unload()在版本 3.0 中被移除。添加事件處理常式到 unload 事件

6、練習

範例1：

<script>
$(document).ready(function(){

});
</script>
shape
shape