浅析js绑定事件的常用方法


Posted in Javascript onMay 15, 2016

浅析js绑定事件的常用方法 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS事件绑定</title>
<script type="text/javascript">
/**
 * 绑定事件的方式:用事件属性绑定事件函数
 * 优点:1:完成行为的分离 
 * 2:便于操作当事对象,因为function是作为on***的属性出现的,可直接用this引用当事对象。
 * 3:方便读取事件对象,事件触发时系统自动把事件对象传递给事件函数,已其一个来传
 */	
  window.onload=function(){
  	 var k=document.getElementById('k').onclick=function(event){
	 var jj=document.getElementById('jj');
	   jj.style.top=event.clientX+'px';
		 jj.style.left=event.clientY+'px';
	 }
  } 
  
</script>
<style>
	#k{width:60px;height:80px; background-color:#80ffff;}
	#jj{width:60px ;height:80px;background-color:#ffff00;z-index:1000;position:absolute;}
</style>
</head>
<body>
<div id="k"></div>
<div id="jj"></div>	
</body>
</html>

以上这篇浅析js绑定事件的常用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
javascript每日必学之运算符
Feb 16 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
Vue实现计算器计算效果
Aug 17 Javascript
js添加事件的通用方法推荐
May 15 #Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 #Javascript
JQuery validate插件Remote用法大全
May 15 #Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 #Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 #Javascript
js阻止浏览器默认行为的简单实例
May 15 #Javascript
js添加绑定事件的方法
May 15 #Javascript
You might like
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php使用google地图应用实例
2014/12/31 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
javascript实现时钟动画
2020/12/03 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
新护士岗前培训制度
2014/02/02 职场文书
音乐专业自荐信
2014/02/07 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
初中学生期末评语
2014/04/24 职场文书
违章停车检讨书
2014/10/21 职场文书
2014年部门工作总结
2014/11/12 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server