白学的小知识[js.事件]

最新推荐文章于 2024-06-15 18:02:16 发布

Chen-HaHa

最新推荐文章于 2024-06-15 18:02:16 发布

阅读量230

点赞数 4

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/c_made_c/article/details/136993088

版权

一、事件的常用绑定方式

1 、行内绑定，语法：

<标签 属性列表 事件="事件处理的程序" />
<button onclick="addNode();">创建节点</button>

行内绑定：行内绑定的方式所有的行为（结构、样式、行为）都绑定在同一个标签中，不利于后期维护，而且违反js 代码与 html 代码相分离。

2 、动态绑定，语法:

var obj = document.getElementById("testButt");
obj.onclick = function(){
alert("测试动态绑定");
}

动态绑定：兼容性好，同一个dom元素对象同一个事件只能绑定一个处理函数，多个的话后会覆盖前者。

3、事件监听，语法：

var obj = document.getElementById("testButt");
obj.addEventListener("click",eventTesta);
obj.addEventListener("click",eventTestb);
function eventTesta(){
alert("aaaaaaaaaaaaaaaaaaaaaaaa");
}
function eventTestb(){
alert("bbbbbbbbbbbbbbbbbbbbbb");
}//多个处理函数全部执行了

事件监听: 同一个元素对象同一个事件可以添加多个事件处理程序,dom对象.addEventListener("事件类型",处理函数,boolean) 布尔值可选，默认值是false指定事件是否在捕获或者冒泡阶段执行。

二、常用的事件类型

1、用于页面:

1 、 onload

页面加载时候一般用于 body 元素

2 、 onunload

页面离开或关闭

注：IE浏览器刷新、页面跳转可以执行 chrome浏览器什么情况都不执行

<body onunload="closeLoad();" onload="eventLoad();">

<script type="text/javascript">
function closeLoad(){
alert("页面关闭事件！！！");
}
function eventLoad(){
alert("当页面加载时事件");
}
</script>

2、用于鼠标:

1 、 onclick

单击事件用于鼠标左键点击一下（按下并弹起完成单击）

2 、 ondblclick

双击事件鼠标左键快速点击两下

注：单击、双击不能同时定义在同一个对象

<button onclick ="testClick();">单击事件</button>
<button ondblclick="testDblclick();">双击事件</button>

<script type="text/javascript">
function testDblclick(){
alert("双击事件");
}
function testClick(){
alert("单击事件");
}
</script>

3 、 onmouseover

鼠标悬停时（当鼠标放上时）

4 、 onmouseout

鼠标移开时

5 、 onmousedown( 不分左右键 )

鼠标按下时（仅指按下）

6 、 onmouseup( 不分左右键 )

释放鼠标按键时

<div id="testDiv" style="width: 200px;height: 200px;background-color: coral;"
>
鼠标事件
</div>

var objNode = document.getElementById("testDiv");
objNode.onmouseover = function(){
alert("鼠标悬停1111111111");
};
objNode.onmouseout = function(){
alert("鼠标移开2222222222222");
};
objNode.onmousedown = function(){
alert("左键按下33333333333333");
};
objNode.onmouseup = function(){
alert("释放444444444444444444");
};

3、用于键盘:

1 、 onkeydown

按下键盘某个键时

2 、 onkeyup

抬起键盘某个键时

3 、 onkeypress

按下或按住键盘某个键 ( 注意：跟 onkeydown 不要同时用 )

用户名： <input id="userName" name="userName" value="" type="text" />

var objNode = document.getElementById("userName");
objNode.addEventListener("keydown",keyFun1);
objNode.addEventListener("keyup",keyFun2);
objNode.addEventListener("keypress",keyFun3);
function keyFun1(){
console.info("键盘按下11111111111");
}
function keyFun2(){
console.info("键盘抬起22222222222");
}
function keyFun3(){
console.info("键盘按住33333333333");
}

4、表单元素事件:

1 、 onblur

当文本框失去焦点（鼠标光标在文本框之外 )

2 、 onfocus

当文本框获得焦点（鼠标光标在文本框之内）

用户名： <input onblur="blueFun();" onfocus="focusFun();" id="userName"
name="userName" value="" type="text" />

function blueFun(){
console.info("失去焦点111111");
}
function focusFun(){
console.info("得到焦点22222222");
}

3 、 onchange ( 经常用于下拉选择框 )

内容发生改变

4 、 onsubmit( 表单提交时的事件 )

点击 “submit” 按钮

5 、 onreset( 表单元素重置的事件 )

点击 "reset" 按钮

<form id="myForm" name="myForm" method="get"
action="https://www.baidu.com" onsubmit="return fun6()" onreset="return
fun7()">
<input name="" value="" type="text"
onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br />
<select name="city" onchange="fun5(this)">
<option selected>-请选择城市-</option>
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
<option value="4">重庆</option>
</select>
<br />
<input type="submit" value="提交数据" />
<input type="reset" value="重置数据" />
</form>

<script>
function fun1(){console.log("获得焦点");}
function fun2(){console.log("失去焦点");}
function fun3(){console.log("正在输入");}// 只要输入
了,就会触发
function fun4(){console.log("内容改变");}// 内部信息发
生变化的同时,要失去焦点
function fun5(sel){console.log("内容发生改变
了"+sel.value)}
function fun6(){
alert("发生了提交事件");
// 做了一些运算之后 动态决定表单能否提交
return false ;
}
function fun7(){
console.log("发生了重置事件");
return true;
}
</script>

获取表单元素值方式

1 、 dom 元素对象 .value

document.getElementById("userName").value

function submitFun(){
//alert("确定要提交数据吗33333");
alert(document.getElementById("userName").value+"_1111111111");
alert(document.myForm.userName.value+"_2222222222222");
}
function resetFun(){
alert("数据会被重置4444");
}

5、 DOM 中 event 对象的属性:

type ：当前事件的类型

keyCode: 被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup

clientX：获取当前事件距离窗口左边的距离；
clientY：当前事件发生时距离窗口顶端的距离；
pageX：当前事件所在网页中的x坐标
pageY：当前事件所在网页中的y坐标；
screenX：当前事件所在屏幕中的x坐标；
screenY：当前事件所在屏幕中的y坐标；

event 参数就是一个 event 对象，这个 event 对象必须小写。

在 Html 标签中我们通过事件来调用函数，可以向函数传递事件（ event ）参数，但是这个对象是暂时

的，这个对象就是 event 对象

<input onkeydown="getEventInfo(event);" type="text" name="userName"
id="userName" value="admin" />

// 注: event 参数是固定的.

function getEventInfo(e){
alert(e.type);
}

Chen-HaHa

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
白学的小知识[js.事件]

行内绑定的方式所有的行为（结构、样式、行为）都绑定在同一个标签中，不利于后期维护，而且违反js。元素对象同一个事件只能绑定一个处理函数，多个的话后会覆盖前者。同一个元素对象同一个事件可以添加多个事件处理程序,dom对象。单击事件用于鼠标左键点击一下（按下并弹起完成单击）标签中我们通过事件来调用函数，可以向函数传递事件（当文本框获得焦点（鼠标光标在文本框之内）注：单击、双击不能同时定义在同一个对象。当文本框失去焦点（鼠标光标在文本框之外。鼠标悬停时（当鼠标放上时）鼠标按下时（仅指按下）
复制链接

扫一扫