开发者需要掌握的JS事件

JavaScript事件

事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在,事件通常可以修饰多种对象。

1.为对象添加事件的2种方式

①:在HTML元素中添加对象的事件

<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
functionovertest(){
alert("移动到图片上方");
}
</script>
</head>
<body>
<img src="1.jpg" width="200" height="300" onmouseover = "overtest()";/>
</body>
②:在JS代码中为元素添加事件
<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
functionovertest(){
alert("移动到图片上方");
}
window.onload = function(){
document.getElementById("myimg").onmouseover = overtest;
}
</script>
</head>
<body>
<img src="1.jpg" width="200" height="300" id="myimg";/>
</body>

总结:优先使用第二种,将js代码与HTML元素代码分离开,更加方便统一管理维护。

问题:HTML 元素添加事件, 与JS添加事件是否可以完全等价?

在实际开发中,如果传参数,使用HTML元素绑定事件,如果不传参数,使用JS绑定事件。传参数也可以使用与JS绑定事件【使用匿名函数】。示例代码如下:

<head>
<title>HTML事件绑定与JS绑定</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
functionclicktest(o){
alert(o);
}
window.onload = function(){
document.getElementById("mybutton").onclick = function(){
clicktest('次奥');
}
}
</script>
</head>
<body>
<input type="button" id="mybutton" value="点击我!">
<input type="button" value="别碰我!" onclick = "clicktest('次奥')"/>
</body>

2.鼠标移动事件

Mousemove:鼠标移动时触发事件 鼠标跟随效果

Mouseover:鼠标从元素外,移动元素之上,信息提示、字体变色

Mouseout:鼠标从元素上,移出元素范围,和mouseover一起使用

3.鼠标点击事件(左键相关事件)

click 鼠标单击事件

dbclick 鼠标双击事件

mousedown/mouseup 鼠标按下、按键弹起 click = mousedown + mouseup;

oncontextmenu 鼠标右键菜单事件 (不是浏览器兼容事件)

4.聚焦离焦事件

focus 聚焦 页面焦点定位到目标元素

blur 离焦 页面焦点由目标元素移开

Demo:

<script type="text/javascript">
window.onload= function(){
//页面加载后,在输入框加入默认值,并以灰色显示
document.getElementById("username").value= "用户名";
document.getElementById("username").style.color="gray";
//聚焦事件
document.getElementById("username").onfocus= function(){
document.getElementById("username").value="";
document.getElementById("username").style.color="black";
}
//离焦事件
document.getElementById("username").onblur=function(){
varname = document.getElementById("username").value;
if(name==""){
document.getElementById("username").value="张三";
document.getElementById("username").style.color="gray";
}
}
}
</script>
</head>
<body>

请输入用户名:<input type="text" id="username"><br/>

</body>

5.键盘事件

使用场景:没有提交按钮,我们一般采用回车进行提交

Demo:

<script type="text/javascript">
window.onload = function(){
document.getElementById("message").onkeypress = function(e){
// 判断用户 按键是否为 回车键
if(e && e.which){
// 火狐浏览器
if(e.which == 13){
alert("提交")
}
}else{
// IE浏览器
if(window.event.keyCode ==13 ){
alert("提交")
}
}
}
}
</script>
<body>

发送消息 <input type="text" name="message" id="message"/>

</body>

IE 中window对象,提供event属性,所以在IE中可以直接使用 event对象

火狐没有全局event对象,必须在发生事件时,产生一个event对象 ,传递默认方法

6.form的提交、重置事件

submit/reset

onsubmit = "return validateForm" 对表单进行校验

7.改变事件

onchange 制作select联动效果 ---- 省市联动

重点 : onclick 、onchange 、onblur、 onsubmit

8.默认事件的阻止和传播阻止

使用场景极为常见,超链接用户点击后,取消了不发生跳转。

<script type="text/javascript">
// 阻止默认事件发生
functionconfirmDel(e){
varisConfirm = window.confirm("确认删除吗?");
if(!isConfirm){// 用户选择了取消
// 阻止默认事件
if(e && e.preventDefault){
// 火狐
e.preventDefault();
}else{
// IE
window.event.returnValue = false;
}
}
}
// 阻止事件冒泡
functionaclick(e){
alert("a");
if(e && e.stopPropagation){
// 火狐浏览器
e.stopPropagation();
}else{
// IE 浏览器
window.event.cancelBubble = true;
}
}
functiondivclick(){
alert("div");
}
</script>
<body>
<h1>默认事件</h1>
<!-- 删除时,询问用户是否删除,然后再跳转-->
<a href="del?id=1" onclick="confirmDel(event);">这是一个链接</a>
<h1>事件传播</h1>
<!-- 事件冒泡传播 -->
<div onclick="divclick();"><a href="#" onclick="aclick(event);">这个链接 会触发两个事件执行</a></div>
</body>

HTML DOM Event对象

提供preventDefault()用于阻止默认事件的发生, 该方法IE 不支持 ,在IE中使用 returnValue

提供stopPropagation()用与阻止事件传播,该方法IE不支持,在IE中 cancelBubble

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2017-03-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

2606
来自专栏Material Design组件

Material Design — 菜单(Menus)

41010
来自专栏杨龙飞前端

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

3494
来自专栏非著名程序员

基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的...

21910
来自专栏别先生

Idea的快捷键,瞎摸索,开心就好,哈哈哈

前言:如果你有强迫症,换了一个编辑器,最痛苦莫过于快捷键,不顺手了。这里自己瞎摸索的快捷键,贴一下,这里主要以实际应用为主,因为大量介绍的网上已经很多很多,S...

2775
来自专栏lzj_learn_note

前端开发学习──初识Html

type:disc默认 实心小圆圈;square 小方块;circle 空心小圆圈

2122
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

3114
来自专栏互联网软件技术

本地多图上传预览

2022
来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

7776
来自专栏破晓之歌

JS 事件绑定、事件监听、事件委托详细介绍 转

在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用...

1963

扫码关注云+社区

领取腾讯云代金券