事件處理程式(事件繫結、事件監聽、事件偵聽器)
相應某個事件的函式叫做事件處理程式(或事件偵聽器)。
1、TTML事件處理程式
<script type="text/javascript">
function showMessage() {
alert('hello world!');
}
</script>
<input type="button" value="Click Me" onclick="showMessage()">
缺點:
1.存在一個時差問題
2.這樣擴充套件事件處理程式的作用域在不同的瀏覽器中會導致不同結果
3.HTML與JavaScript程式碼緊密耦合
2、DOM0級事件處理程式
將一個函式複製給一個事件處理程式屬性,使用DOM0級事件處理程式被認為是元素的方法。
var btn=document.getElementById('myBtn');
btn.onclick=function () {
alert('Clicked');
}
3、DOM2級事件處理程式
指定事件處理程式:addEventListener(),刪除事件處理程式:removeEventListener()
接收三個引數:要處理的事件名、作為事件處理程式的函式和一個布林值。最後一個布林值引數如果是true,表示在捕獲階段呼叫事件處理程式;如果是false,表示在冒泡階段呼叫。
新增事件處理程式
var btn=document.getElementById('myBtn');
btn.addEventListener('click',function () {
alert(this.id);
},false);
移除事件處理程式
var btn=document.getElementById('myBtn'); var hander=function(){ alert(this.id); } btn.addEventListener('click',hander,false); btn.removeEventListener('click',hander,false);
注意:通過addEventListener()新增的匿名函式將無法移除。
4、IE事件處理程式
指定事件處理程式:attachEvent(),刪除事件處理程式:detachEvent()
接收兩個引數:要處理的事件名、作為事件處理程式的函式。
5、跨瀏覽器事件處理程式
要保證事件處理事件的程式碼能在大多數瀏覽器下一致地執行,只需要關注冒泡階段。
var EvenUtil={
addHander:function (el,type,hander) {
if(el.addEventListener){
el.addEventListener(type,hander,false);
}else if(el.attachEvent){
el.attachEvent("on"+type,hander);
}else {
el["on"+type]=hander;
}
},
removeHander:function (el.type,hander) {
//
}
};
相關推薦
事件處理程式(事件繫結、事件監聽、事件偵聽器)
相應某個事件的函式叫做事件處理程式(或事件偵聽器)。 1、TTML事件處理程式 <script type="text/javascript"> function showMessage() { alert('hello world!')
JS事件詳解(二) —— 事件處理程式(事件的繫結)
事件繫結方法 方法一:直接在HTML標籤中繫結 在html標籤中新增“on”+事件名稱的屬性來繫結事件 事件處理程式可直接寫在屬性值當中 <div class="demo" onclick="console.log(this)">&l
事件處理程式(HTML)
HTML事件處理程式 通過設定HTML標籤特性來繫結事件處理程式。 處理方式(如圖): 1:會建立一個封裝元素屬性值的函式 2:會在這個函式中建立一個event事件物件 <form> <input name="username" value="">
事件處理程式 (DOM0級)
DOM0事件處理程式 每個元素都有自己的事件處理程式屬性,那麼直接獲取物件,然後在物件上設定事件處理程式屬性。 1:獲取節點物件引用 2:在事件成員上設定處理函式,這時函式內部this指向節點物件。 <ul id="u-1"> <li>
事件繫結(事件處理程式)
事件處理程式(事件繫結):響應某個事件的函式就叫做事件處理程式(或事件偵聽器)。 為事件指定處理程式的方式: 1.HTML 事件處理程式:某個元素支援的每種事件,都可以使用一個與相應事件處理程式同名的 HTML 特性來指定。這個特性的值應該是能夠執行的 JavaScript 程式
為同一個元素,新增相同名字的處理函式的不同繫結事件—通過switch語法
要點: 1.switch語法跟break語法結合使用,才能達到效果,滿足條件後,執行出路函式,然後跳出迴圈。 2.這裡的.type是返回的是事件的繫結型別,如click。區別與typeof 判斷的是值的型別,如 "undefined"。 程式碼: <!DOCTYPE html&
委託、事件區別;UGUI按鈕繫結方法
委託 關鍵詞:delegate 示例:public delegate void ChatClentHandle<Netsponse>(Netsponse msg); public
《Javascript 高階程式設計(第三版)》筆記0x16 事件:事件流、事件處理程式
目錄 事件流 事件冒泡(event bubbling) 事件捕獲(event capturing) DOM事件流 事件處理程式 HTML
js學習筆記:事件——事件流、事件處理程式、事件物件
Javascript與HTML之間的互動是通過事件實現的。 事件,就是文件或瀏覽器視窗中發生的一些特定的互動瞬間。 可以使用偵聽器來預定事件,以便事件發生時執行相應程式碼。 事件流 事件流描述的是從頁面中接受事件的順序。 事件冒泡 IE的事件
跨瀏覽器的事件處理程式//IE、chrome
var eventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else i
nodejs之事件處理機制(丟擲事件、監聽事件)
程式執行到一定階段的時候會發出一個訊息,對這個訊息進行監聽,作出響應;==========================================***************建立伺服器var http = require('http'); var fs = requ
微信小程式 template新增繫結事件
對於模板的使用,我是想將模板的事件單獨出來,其他引用模板的頁面中不再摻雜模板事件,比較方便管理,如果還有其他好的解決辦法, 請賜教。 template.wxml <view bindtap="clickView" class="tempClass"&g
Js事件詳解(1)事件型別及幾種新增事件處理程式的方法
js中的事件 早期的事件流的兩種解決方案: 1.IE:事件冒泡流 即事件開始時由最具體的元素(DOM中層次最深的那個節點)接收,然後逐級向上傳播到較為不具體的節點(文件)–自下向上。 所有現代的瀏覽器都支援事件冒泡。 2.Netscape Co
從零開始理解JAVA事件處理機制(2)
extend nds 接下來 htm ref param 簡單 tostring ansi 第一節中的示例過於簡單《從零開始理解JAVA事件處理機制(1)》,簡單到讓大家覺得這樣的代碼簡直毫無用處。但是沒辦法,我們要繼續寫這毫無用處的代碼,然後引出下一階段真正有益的代碼。
初步剖析QT事件處理全過程(Windows)
職責 spa message alt cati 窗口 初步 負責 啟動 一、說起Qt事件處理,在windows平臺下,當然離不開Win32: Win32程序的基本結構: 1.註冊窗口; 2.創建窗口; 3.啟動由GetMessage和DispatchMessage構成
4 C 程式設計學習——窗體Paint事件處理程式
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
Qt中的事件處理機制(event)
Qt事件也就是Qt程式中出現的一系列“事情”,包括對使用者操作做出反應時發出的滑鼠或鍵盤事件等;以及系統內部自動發出的定時器事件等。總之,出現了這些事件後就需要對這些事件進行處理,處理的方法便是“事件處理機制”。 圖1 Qt事件產生 以
javascript中的事件處理程式
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 視窗事件屬性(Window Event Attributes) ::::::::::::::::::
jQuery繫結動態元素的點選事件無效
示例如下: <div> <ul id="demo"> <li>Kubernetes:下一代分散式系統的護戒使者</li> <li>機器學習工具--Pandas cheat sheet</li> <li&g
你必須知道的React的知識點:單向資料流,高效能虛擬DOM,元件間的資料互動,事件與資料的雙向繫結,生命週期鉤子,fetch:資料請求等
1、React除錯工具:React Developer Tools 2、React開發工具:Atom 3、React UI庫:Material-UI / Ant Deaign 4、React適用場景:資料不斷變化的大型應用程式 5、前端UI構建方式:資料模型、UI介面