JavaScript 事件处理基础与三种实现方式

JavaScript 事件处理基础

事件处理

一、事件源：任何HTML元素（节点），如body、div、button

二、事件：用户操作

鼠标事件： click 单击 dblick 双击 oncontextmenu 文本菜单

              
<body oncontextmenu="return false">//禁止右键的程序

mouseover 放上

mouseout 离开

mousedown 按下

mouseup 抬起

mousemove 鼠标移动

键盘事件： keypress 键盘事件 keyup 抬起 keydown 按下

文档事件： load 加载 onload 是页面加载完成之后触发的事件 unload 关闭 breforeunload关闭之前

表单事件： focus 焦点事件 blur 失去焦点 submit 提交事件 change 改变事件

其它事件： scroll 滚动 selectstart 选择事件

事件处理程序的三种实现方式

三、事件处理程序

第一种： 格式：<tag on事件="事件处理程序" /> 实例：

<script>
function show(){
var one=document.getElementById("one");
alert(one.innerText);
  }
show();
</script>
<body>
<div id="one">
wwwwwwwwwwwwwwwww
</div>
<input type="button" onclick="show()" value="show">

第二种: 直接在javascript里边对象.on处理程序

        
<div id="two">
你好，本站https://www.jb51.net
</div>
<script>
var one=document.getElementById("two");
one.onclick=function(){
this.style.backgroundColor="red";
  }
</script>

第三种： 基本没什么人用

<script for="事件源ID" event="事件">事件处理程序</script>
<div id="th">
你好，本站https://www.jb51.net
</div>
<script for="th" event="onclick">
var one=document.getElementById("th");
one.style.backgroundColor="red";
</script>

小伙伴们是否了解了javascript的事件处理了呢，有疑问就给我留言吧。