浅析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 面向对象编程基础:封装
Aug 21 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
react合成事件与原生事件的相关理解
May 13 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
提问的智慧(2)
2006/10/09 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
accesskey 提交
2006/06/26 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
大学竞选班长演讲稿
2014/04/24 职场文书
初中英语课后反思
2014/04/25 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
庆祝国庆节标语
2014/10/09 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
5个实用的JavaScript新特性
2022/06/16 Javascript