浅析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操纵Cookie实现购物车程序
Feb 15 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
alert和confirm功能介绍
May 21 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
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 一个随机字符串生成代码
2010/05/26 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
php格式文件打开的四种方法
2018/02/24 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
Python中字符串List按照长度排序
2019/07/01 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
标准毕业生自荐信范文
2013/11/04 职场文书
社区消防工作实施方案
2014/03/21 职场文书
幼儿园见习报告
2014/10/30 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
杨善洲电影观后感
2015/06/04 职场文书
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python