html 回复默认行为,原生阻止表单默认行为的方法（默认提交刷新页面）

表单一点击提交按钮(submit)必然跳转页面，可以看到一点击提交按钮，浏览器的刷新按钮闪了一下，这就是表单的默认行为。

组织默认行为，有两种办法：

第一种是input提交换成button，type类型是button，监听button的点击事件，就不会触发表单默认提交行为了。

表单添加，表格删除

商品名称

分类

提交

商品名称	分类

let btn = document.querySelector(".btn");

btn.addEventListener("click", () => {

let nameVal = document.getElementById("name").value;

let categoryVal = document.getElementById("category").value;

let table = document.querySelector(".table")

let tr = document.createElement("tr");

tr.innerHTML = `

${nameVal}${categoryVal}

`

table.appendChild(tr);

document.getElementById("name").value="";

document.getElementById("category").value="";

})

//删除列表

let table = document.querySelector(".table");

table.addEventListener("click",(e)=>{

let targetTr= e.target.parentElement.parentElement;

targetTr.remove();

})

第二种是监听表单的submit事件，回调里阻止表单默认行为

let form = document.querySelector(".form-horizontal");

//(监听表单的submit事件)

form.addEventListener("submit", (e) => {

let nameVal = document.getElementById("name").value;

let categoryVal = document.getElementById("category").value;

let table = document.querySelector(".table")

let tr = document.createElement("tr");

tr.innerHTML = `

${nameVal}${categoryVal}

`

table.appendChild(tr);

document.getElementById("name").value="";

document.getElementById("category").value="";

e.preventDefault() //阻止默认行为

})

//删除列表

let table = document.querySelector(".table");

table.addEventListener("click",(e)=>{

let targetTr= e.target.parentElement.parentElement;

targetTr.remove();

})

在table上监听click事件，寻找事件源，然后把事件源的上级的上级整个删除

使用vue处理逻辑的话，两个方法，只有下面几行代码

export default {

data() {

return {

name: "",

category: "",

list: [

{

name: "张三",

category: "321"

},

{

name: "lisi",

category: "444"

}

]

}

},

methods: {

submit() {

this.list.push({

name: this.name,

category: this.category

})

},

delItem(i) {

this.list.splice(i, 1)

}

}

}

数据做双向绑定，button添加事件方法即可