Javascript学习历程之事件

增加监听函数（f1）
方法一

window.onload = function () {var myP = document.getElementById("myP");    myP.onclick = function () {        alert("我被点击了");    }}

方法二添加处理函数attachEvent("onclick", fnClick)，删除处理函数detachEvent("onclick", fnClick)

var myP;function fnClick() {    alert("我被点击了");    myP.detachEvent("onclick", fnClick);}window.onload = function () {    myP = document.getElementById("myP");    myP.attachEvent("onclick", fnClick);}

方法三添加多个处理函数

var myP;function fnClick1() {    alert("我被点击了a");}function fnClick2() {    alert("我被点击了b");}window.onload = function () {    myP = document.getElementById("myP");    myP.attachEvent("onclick", fnClick1);    myP.attachEvent("onclick", fnClick2);}

同一个函数处理多个事件（f2）

function handle(event) {var divshow = document.getElementById("show");if (event.type == "click") {        divshow.innerHTML = "你点击了我";    }else        divshow.innerHTML = "你鼠标经过我";}window.onload = function () {var elem = document.getElementById("img-f2");    elem.onclick = handle;    elem.onmouseover = handle;}

获取事件的目标（f2）event.target

function handle(event) {var mydiv = document.getElementById("show");    mydiv.innerHTML = "事件的目标是" + event.target.tagName;}window.onload = function () {var myElem = document.getElementById("img-f2");    myElem.onclick = handle;}

/*浏览器兼容性处理
function handle(oEvent){
    if(window.event) oEvent=window.event;
    var oTarget;
    if (oEvent.srcElement)
        oTarget = oEvent.srcElement;
    else
        oTarget=oEvent.target;
}
*/

控制鼠标事件(f2) onclick,ondblclick,onmouseover,onmouseout,onmouseup,onmousedown

function handle(event) {var mydiv = document.getElementById("show");    mydiv.innerHTML+=event.type+"<br>";}window.onload = function () {var myElem = document.getElementById("img-f2");    myElem.onclick = handle;    myElem.ondblclick = handle;    myElem.onmouseover = handle;    myElem.onmouseout = handle;    myElem.onmouseup = handle;    myElem.onmousedown = handle;}

鼠标button属性

function handle(event) {var mydiv = document.getElementById("show");    mydiv.innerHTML ="button的值："+ event.button;}document.οnmοusedοwn=handle;window.onload = handle;

键盘事件
例子1

function handle(event) {var show = document.getElementById("show");    show.innerHTML += event.type+" ";}window.onload = function () {var mytext = document.getElementById("mytext");    mytext.onkeydown = handle;    mytext.onkeyup = handle;    mytext.onkeypress = handle;}

例子2

function handle(event) {var show = document.getElementById("show");    show.innerHTML += event.type + ":charCode: "+event.charCode+"keyCode"+event.keyCode+"<br>";}window.onload = function () {var mytext = document.getElementById("mytext");    mytext.onkeydown = handle;    mytext.onkeyup = handle;    mytext.onkeypress = handle;}

/*html事件
load
unload
error
select
change
submit
focus
blur
*/

屏蔽鼠标右键（f4）属性document.oncontextmenu

function block(oEvent) {var myP = document.getElementsByTagName("p")[0]; oEvent.returnValue = false; oEvent.preventDefault();    myP.innerHTML = "屏蔽鼠标右键";if (window.event) {        oEvent = window.event;//兼容IE        oEvent.returnValue = false; //取消默认事件    }else {        oEvent.preventDefault();//取消默认事件    }}document.oncontextmenu = block;

window.onload = function () {var oUL = document.getElementById("listUL");var aLi = oUL.childNodes;var oA;for (var i = 0; i < aLi.length; i++) {if (aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length) {            oA = aLi[i].firstChild;            oA.onclick = change;        }    }}function change() {var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];if (oSecondDiv.className == "myHide")        oSecondDiv.className = "myShow";else        oSecondDiv.className = "myHide";}

转载于:https://www.cnblogs.com/suguoqiang/archive/2012/02/26/2368763.html

Javascript学习历程之事件相关推荐

JavaScript 学习笔记 - 挂载事件 Demo
JavaScript 学习笔记 - 挂载事件 Demo 例子 addEventListener 监听事件挂载事件的同时带上参数 dispatchEvent 触发事件 removeEventListe ...
JavaScript学习历程和心得
一.前言在过去,JavaScript只是被用来做一些简单的网页效果,比如表单验证.浮动广告等,所以那时候JavaScript并没有受到重视.自从AJAX 开始流行后,人们发现利用JavaScript ...
JavaScript学习九、事件
JavaScript 与 HTML 之间的交互是通过事件实现的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预定事件,以便事件发生时执行相应的代码.类似于设计 ...
JavaScript 学习笔记之事件
事件事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目 ...
Javascript学习历程之表格与表单
/*针对表格常用的DOM操作针对<table>元素 caption tBodies tFoot tHead rows deleteRow(position) insertRow(posi ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习（三十四）—事件委托
JavaScript学习(三十四)-事件委托 (一).什么是事件委托? 所谓的事件委托就是指将事件添加到祖先元素身上,依据事件冒泡的原理(就是指事件的执行顺序是从当前元素逐步扩展到祖先元素,直到扩展到 ...
JavaScript学习（三十三）—事件对象常用的属性和方法
JavaScript学习(三十三)-事件对象常用的属性和方法 (一).type属性 <style>#box {width: 200px;height:

Javascript学习历程之事件

Javascript学习历程之事件相关推荐

最新文章

热门文章