浅析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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
jQuery操作之效果详解
May 19 jQuery
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
javascript canvas API内容整理
Feb 16 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自动生成月历代码
2006/10/09 PHP
自己前几天写的无限分类类
2007/02/14 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
javascript中的隐式调用
2018/02/10 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
python装饰器decorator介绍
2014/11/21 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
python实现八大排序算法(2)
2017/09/14 Python
TensorFlow损失函数专题详解
2018/04/26 Python
《灯光》教学反思
2014/02/08 职场文书
住房抵押登记委托书
2014/09/27 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
年终工作总结范文
2019/06/20 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android