最初に、JSによるイベントを追加する一般的な方法を紹介します。特定のコンテンツは次のとおりです
<!Doctype html> <html> <head> <meta charset = "utf-8"> <title> </head> <body> <p id = "p1">テストイベント:firefoxはaddeventlistenerを使用します。 } function test2(){alert( "test2"); } //イベントの追加メソッド関数addEvent(element、e、fn){// firefoxはaddeventlistenerを使用してイベントを追加します(element.addeventlistener){element.addeventlistener(e、fn、false); } // ie actacheventを使用してイベントを追加します{element.attachevent( "on"+e、fn); }} window.onload = function(){var element = document.getElementById( "p1"); addevent(element、 "click"、test1); addevent(element、 "click"、test2); } </script> </body> </html>JSイベントをバインドする一般的な方法:
イベントのバインド方法:イベント関数をイベント属性でバインドする
アドバンテージ:
1.行動の分離を完了します
2。関数がon ***属性として表示されるため、これを使用して関係するオブジェクトを直接参照できるため、関係するオブジェクトを操作するのに便利です。
3。読みやすいイベントオブジェクト。イベントがトリガーされると、システムはイベントオブジェクトを自動的にイベント関数に渡し、そのうちの1つが渡されます。
<?xml version = "1.0" encoding = "utf-8"?> <!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> js event binding </<script = ""> javascript "> javascript" k = document.getElementById( 'k')。onclick = function(event){var jj = document.getElementById( 'jj'); jj.style.top = event.clientx+'px'; jj.style.left = event.clienty+'px'; }} </script> <style> #k {width:60px; height:80px;背景色:#80ffff;} #jj {width:60px; height:80px; background-color:#ffff00; z-index:1000; position:absolute;} </style> </head> <div div = "k"> </div> <div id = "jj> </div> </html> </html>上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。