快速入门！JavaScript中事件的默认行为

事件的默认行为

事件本身就是天生就有的，某些事件触发，即使你没有绑定方法，也会存在一些效果，这些默认的效果就是"事件的默认行为"

a 标签的点击跳转就存在默认行为
- 1.页面跳转
- 2.锚点定位（HASH定位[哈希定位]）
  - target=’_blank’：让其在新窗口打开（加在标签上）
  - <a href="#box"> 内容 </a>首先会在当前页面URL地址栏末尾设置一个HASH值，浏览器检测到HASH值后，会默认定位到当前页面中ID和HASH相同的盒子的位置（基于HASH值我们还可以实现SPA单页面应用）
INPUT标签也有自己的默认行为
- 1.输入内容可以呈现到文本框中
- 2.输入内容的时候会把之前输入的一些信息呈现出来（并不是所有浏览器和所有情况下都有）
  …
SUBMIT按钮也存在默认行为
1.点击按钮页面会刷新
<form action="http://www.xxx.cn/"> <input type="submit" value="提交"> </form>
在FORM中设置ACTION，点击SUBMIT，会默认按照ACTION指定的地址进行页面跳转，并且把表单中的信息传递过去（非前后端分离项目中，由服务器进行页面渲染，由其它语言实现数据交互，一般都是这样处理）
…

阻止A标签的默认行为：很多时候我们使用A标签仅仅是想当做一个普通的按钮，点击实现一个功能，不想页面跳转，也不想锚点定位在结构中阻止<a href="javascript:;">标签内容~~</a>javascript:void 0/undefined/null...;在JS中也可以阻止给其CLICK事件绑定方法，当我们点击A标签的时候，先触发CLICK事件，其次才会执行自己的默认行为link.onclick = function (ev) {//     ev = ev || window.event;
//     return false;
// };// link.onclick = function (ev) {//     ev = ev || window.event;
//     ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
// };// tempInp.onkeydown = function (ev) {//     // ev = ev || window.event;
//     // ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
//     return false;
// };
tempInp.onkeydown = function (ev) {ev = ev || window.event;let val = this.value.trim(),//=>TRIM去除字符串首位空格(不兼容) this.value=this.value.replace(/^ +| +$/g,'')len = val.length;if (len >= 6) {this.value = val.substr(0, 6);//=>阻止默认行为去除特殊按键（DELETE\BACK-SPACE\方向键...）let code = ev.which || ev.keyCode;if (!/^(46|8|37|38|39|40)$/.test(code)) {ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;}}
};

快速入门！JavaScript中事件的默认行为相关推荐

JavaScript中事件回顾
事件其实在第一次学习JavaScript的时候就接触了,一行非常简单的代码 alert('Hello JavaScript!!!')就诠释了什么是事件.事件是什么呢?事件在基于浏览器编程的语言Java ...
快速入门JavaScript
JavaScript简介 JavaScript从名字上看和Java很像,实际上两者也有不少相似的地方.但是它们之间没有任何关系,就像众多周知的老婆饼里没有老婆一样. JavaScript(简称&quo ...
超详细快速入门JavaScript详解(一)
目录一. JS概述&入门二.JS组成三. JS引入方式四. JS-注释五.JS-变量 1.基本数据类型 2.引用数据类型一. JS概述&入门我们为什么要学习JS?: 为了 ...
一篇文章带你快速入门JavaScript（自学者福利）
文章目录一.开始之前二.数据类型 1.变量 2.数字类型(number) 3.字符串类型(string) 4.布尔型.Null和Undefined 5.数据类型转换三.运算符四.控制语句五. ...
pdf python 3.7编程快速入门潘中强_无python基础，这些书籍可以帮您快速入门。
利用Python进行数据分析> 定价:119 元作者:韦斯·麦金尼(Wes McKinney)著;徐敬一译 ISBN:9787111603702 出版社:机械工业出版社学习Python ...
JavaScript中事件的绑定与解绑
目录零.码仙励志一.事件的绑定 1. 对象.on事件名字=事件处理函数 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false); 3. ...
JavaScript中事件循环的理解 Event Loop
为了解决单线程运行阻塞问题,JavaScript用到了计算机系统的一种运行机制,这种机制就叫做事件循环(Event Loop) 事件循环(Event Loop) 在JavaScript中,所有的任务都 ...
十分钟，快速理解JavaScript中的闭包概念
海阔凭鱼跃,天高任鸟飞.Hey 你好!我是猫力Molly 闭包已经是一个老生常谈的问题了,不同的人对闭包有不同的理解.今天我来浅谈一下闭包,大家一起来就"闭包"这个话题,展开讨论, ...
一篇文章带你快速入门JavaScript（实操代码）
目录一.前提简介 1.1什么是JavaScript 1.2JavaScript和Java语言的区别 1.3Html.Css和Javascript 1.4Javascript作用二.实操代码 2.1 ...

快速入门！JavaScript中事件的默认行为

事件的默认行为

快速入门！JavaScript中事件的默认行为相关推荐

最新文章

热门文章