开发者需要掌握的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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS之浏览器对象BOM

    DOM Window 代表窗体 DOM History 历史记录 DOM Location 浏览器导航 重点:window、history、location ,...

    奋斗蒙
  • JavaWeb15-DBUtils(Java真正的全栈开发)

    ? DBUtils 一.DBUtils 1. DButils的介绍 dbutils的介绍及其作用 DBUtils是java编程中的数据库操作实用工具,小巧简单...

    奋斗蒙
  • JSP与EL表达式重点学习笔记(1)

    Jsp&el表达式 JSP指令 ? JSP指令概述 JSP指令的格式:<%@指令名 attr1=”” attr2=”” %>,一般都会把JSP指令放到JSP文件...

    奋斗蒙
  • TypeScript 参数简化实战(进阶知识点conditional types,中高级必会)

    TypeScript中有一项相当重要的进阶特性:conditional types,这个功能出现以后,很多积压已久的TypeScript功能都可以轻而易举的实现...

    ssh1995
  • 记一次Windows日志分析:LogParse

    如今单身的我,现在有大把的时间来修炼我的技术,就像圈内的小伙伴们说:「要女朋友有什么用?这不是影响我写代码吗?」希望我未来能达到「重剑无锋,大巧不工」的境界。

    FB客服
  • ActFramework 小贴士 - 获得应用版本

    有的项目可能需要前端展示后端应用的版本, 这样可以让用户在报告错误的时候给出版本信息,帮助定位错误.

    老码农
  • Git Commit校验

    在我们iOS项目的根目录下执行下面命令:这条命令会在项目根目录生成package.json配置文件。

    用户6094182
  • Python爬虫之模拟登录京东商城

    首先感谢大家的大力支持,博主会持续更新精彩文章,分享更多技术干货。另外,最近在新建的QQ群中结识了一些朋友,气氛很好,大家互相分享技术内容,博主也从中收获了不少...

    用户2769421
  • 基于Ado.Net的日志组件

    软件开发,离不开对日志的操作,它可以帮助我们查找和检测问题。好的日志组件可以对于整个系统来说,至关重要 在NaviSoft产品中,日志组件也占有非常重要的份量。...

    用户1219352
  • Django -- 快速测试&页面美化

    经过前几篇的介绍,我们以及能够建立简单的网站页面,那如果嫌弃网站页面简陋,那我们就必须要为他加上样式来渲染网络页面,在Django中,我们把这些文件统称为"静态...

    cctester

扫码关注云+社区

领取腾讯云代金券