js html 交互监听事件学习
2014-07-03 14:17
211 查看
事件处理程序(handler):
HTML事件处理程序:
JavaScript指定事件处理程序:
DOM2事件处理程序:
HTML事件处理程序:
<input type="button" value="Click Here" onclick="showMessage();" /> <script type="text/javascript"> function showMessage() { alert('Clicked!'); }
JavaScript指定事件处理程序:
<input id="btnClick" type="button" value="Click Here" /> <script type="text/javascript"> var btnClick = document.getElementById('btnClick'); btnClick.onclick = function showMessage() { alert(this.id); }; </script>
DOM2事件处理程序:
<input id="btnClick" type="button" value="Click Here" /> <script type="text/javascript"> var btnClick = document.getElementById('btnClick'); btnClick.addEventListener('mouseover', function() { alert(this.id); }, false); btnClick.addEventListener('click', function() { alert('Hello!'); }, false); </script>
add与remove的参数必须一样 <input id="btnClick" type="button" value="Click Here" /> <script type="text/javascript"> var btnClick = document.getElementById('btnClick'); var handler=function() { alert(this.id); } btnClick.addEventListener('click', handler, false); btnClick.removeEventListener('click', handler, false); </script>
相关文章推荐
- cocos-js 的事件监听(学习)
- Vue.js学习系列(三十五)-- Vue.js事件监听
- JS学习笔记(一)DOM事件和监听
- JS学习第二篇;自定义事件并监听
- JS监听事件错误:Uncaught TypeError: xx(函数名)is not a function at HTMLInputElement.onclick
- html学习 - javascript事件监听以及addEventListener参数分析
- Vue.js学习系列(七)---监听事件
- JS:HTML事件监听
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- js基础学习资料!for循环,监听事件
- Vue.js学习系列(三十五)-- Vue.js事件监听
- Native.js学习:利用Native.js实现Android与HTML数据的交互
- html学习 - jquery事件监听详解
- html行内触发事件的this指向(原生js学习)
- js监听键盘方向键事件
- 强大js web甘特图制作之监听事件和数据操作
- JavaScript 学习笔记(十六) js事件
- HTML+JS学习体会
- Flex学习--为一个事件建立多个监听
- js中的冒泡事件与事件监听